收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2037|回复: 6

[求助] 用JQuery怎么实现幻灯片图片先下载后显示?

[复制链接]
发表于 2013-1-23 13:30:05 | 显示全部楼层 |阅读模式
如题,怎么才能实现呢?

例如在一个页面中包含一个幻灯片模块,此模块使用AJAX来延时读取,这样在读取幻灯片中的图片时就不影响页面其他内容的载入速度了,该怎么实现呢?

我的想法是先做一个遮罩层,这个层和页面中的内容一同被先期读取出来,之后开始读取幻灯片中的内容,这里有个问题,我想先让幻灯片中包含的5张图片都下载完成后,再开始播放,开始播放时将页面中的遮罩层隐藏。此时,整个页面就完整的显示出来。

我研究了半天,现在的效果是,当页面载入完成后,遮罩层消失,但幻灯片中的图片都才下载了一般,显示不全,请问怎么才能让图片先全都下载完成后再让遮罩层消失呢?
发表于 2013-1-24 20:07:42 | 显示全部楼层
jquery的话给你个提示使用.load()方法
回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-1-24 20:43:21 | 显示全部楼层
wyysf 发表于 2013-1-24 20:07
jquery的话给你个提示使用.load()方法

试过了,效果不理想,onload的方法比较好,但是我写的代码比较臃肿,求精简啊。。。。
回复 支持 反对

使用道具 举报

发表于 2013-1-24 23:27:17 | 显示全部楼层
722SPC 发表于 2013-1-24 20:43
试过了,效果不理想,onload的方法比较好,但是我写的代码比较臃肿,求精简啊。。。。

那你得把你的代码亮出来一下吧,要不然大家不知道怎么帮,最好发到技术栏目会比较好。。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-1-25 01:02:56 | 显示全部楼层
treebear 发表于 2013-1-24 23:27
那你得把你的代码亮出来一下吧,要不然大家不知道怎么帮,最好发到技术栏目会比较好。。

有图片啥的呢,我就直接弄了个附件,可以下载看啊,,我还没贴过代码呢,咋贴?
回复 支持 反对

使用道具 举报

发表于 2013-1-25 10:07:50 | 显示全部楼层
本帖最后由 ghbjy1128 于 2013-1-25 10:10 编辑

var imgLoad = function (url, callback) {
        var img = new Image();

        img.src = url;
        if (img.complete) {
                callback(img.width, img.height);
        } else {
                img.onload = function () {
                        callback(img.width, img.height);
                        img.onload = null;
                };
        };

};

这是完整加载图片后才回调。
还有更高端的,获得图片头信息后就执行回调的。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-1-28 15:20:47 | 显示全部楼层
ghbjy1128 发表于 2013-1-25 10:07
var imgLoad = function (url, callback) {
        var img = new Image();

这个一次能载入多张图片吗?例如一个幻灯片包含了5张图片,需要先把这5张图片都下载完成后再来进行显示。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-10-23 10:44 , Processed in 0.109100 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表