图片预加载

最新推荐文章于 2024-07-07 18:28:23 发布

叶少翔

最新推荐文章于 2024-07-07 18:28:23 发布

阅读量275

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/jiangzunshao/article/details/53040807

版权

Jquery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<ul id="img">
	<li><img src="/statics/images/loading2.gif" loding="/uploads/2016/0516/1463371453138.jpg" width="310" height="250" /></li>
</ul>

说明:
src路径为默认给定的图片, loading路径为真实显示的图片路径

//图片预加载
function lodingImg(){
    $('#img li img').each(function(){
      if($(this).offset().top<=$(document).scrollTop()+$(window).height() 
        && $(this).offset().top>=$(document).scrollTop()) {
        var url = $(this).attr('loading'),
            img = $(this).attr('src');
        if(img !=url){
          $(this).attr({src:url,alt:''}).css({opacity:0}).animate({opacity:1},500);
        }
      }
    });
}
lodingImg();//加载图片
//滚动事件加载
$(window).scroll(function(){
  lodingImg();//加载图片
})
//窗口改变大小加载
$(window).resize(function(){    
  lodingImg();//加载图片
})