Question

求大神给帮忙写个js；

纯静态网页；图比较大；每次首页html css都载入好了图片还没出来。
想做一个Loading页；将网站的大图放到Loading页里；用户首次访问会先到这个Loading页面，加载完毕后；自动跳转到网站首页。用户本地浏览器有缓存的情况下第二次在访问；就不会在出现Loading页了；
小弟不会js；球大神帮忙给写个；十分感激

Answer 1

可以用 懒加载的方式。 大图的位置。先用 一个 loading 的背景图。

12<script src="jquery-1.11.0.min.js"></script><script src="jquery.lazyload.js?v=1.9.1"></script>

html图片调用方法
为图片加入样式lazy 图片路径引用方法用data-original
123456<img class="lazy" data-original="img/bmw_m1_hood.jpg"><img class="lazy" data-original="img/bmw_m1_side.jpg"><img class="lazy" data-original="img/viper_1.jpg"><img class="lazy" data-original="img/viper_corner.jpg"><img class="lazy" data-original="img/bmw_m3_gt.jpg"><img class="lazy" data-original="img/corvette_pitstop.jpg">

js出始化lazyload并设置图片显示方式
12345<script type="text/javascript" charset="utf-8"> $(function() { $("img.lazy").lazyload({effect: "fadeIn"}); });
</script>

http://www.jq22.com/jquery-info390

追问

这个是当前页面的预加载哇；我做的页面首页带css3动画效果；只要进入页面；动画已经开始了；但是图还没加载好....

追答

//单张图片加载 obj 原生img 对象 fn 是回调函数
function onload(obj, fn) {
var img = new Image();
img.src = obj.src;
if(img.complete) {
fn();
return;
}
img.onload = function () {
fn();
};
if (getBrowser().name === 'msie') {
var t = window.setInterval(function () {
if (obj.readyState === 'loaded' || obj.readyState === 'complete') {
window.clearInterval(t);
fn();
}
}, 10);
}
}

onload(imgboj,'加载完成执行的东西。比如开始 CSS3动画。')