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

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

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

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

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

搜索
查看: 1178|回复: 1

[求助] 求解~!关于先载入图片后显示的代码~!

[复制链接]
发表于 2013-1-28 15:28:14 | 显示全部楼层 |阅读模式
function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象,实现图片的预下载
img.src = url;
if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
callback.call(img);
return; // 直接返回,不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
};

这段代码我看了,如果创建一个按钮,调用这个函数,可以载入图像,但我想实现的是一个幻灯片效果,就是有5张图片先被下载到本地缓存中,然后在开始幻灯片的正常图片切换,请问高手该怎么实现呢???
 楼主| 发表于 2013-1-28 15:30:47 | 显示全部楼层
var imgOnload_1 = document.getElementById("Image_1");
        imgOnload_1.onload = function(){
                var imgOnload_2 = document.getElementById("Image_2");
                imgOnload_2.onload = function(){
                        var imgOnload_3 = document.getElementById("Image_3");
                        imgOnload_3.onload = function(){
                                var imgOnload_4 = document.getElementById("Image_4");
                                imgOnload_4.onload = function(){
                                        var imgOnload_5 = document.getElementById("Image_5");
                                        imgOnload_5.onload = function(){
                                                $('div.mask').fadeOut(1000);
                                                slider();
                                        };
                                        imgOnload_5.src = "images/5.jpg";
                                };
                                imgOnload_4.src = "images/4.jpg";
                        };
                        imgOnload_3.src = "images/3.jpg";
                };
                imgOnload_2.src = "images/2.jpg";
        };
        imgOnload_1.src = "images/1.jpg";

我自己还写了这么一段,但总觉得效果不高,也不是最佳的解决方案,求教啊
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2019-10-21 13:00 , Processed in 0.093512 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

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