一个简单的图片懒加载所谓懒加载是一种提高网页打开速度，获得更好用户体验的手段。它选择的重要部分先加载，次要的部分在需要的时候加载。例如，在电子商务网站上，首屏通常有大量数据，以及高清的横幅或轮播。页面非折叠部分有很多图片夹杂着会员的很多产品。这时候选择懒加载就显得很重要了，可以保证首屏流畅。本文只是一个简单的图片懒加载示例。它是对性能优化的介绍。方法比较简单明了。只要有一点js基础，都能看懂。废话不多说首先添加class="img-delay"和data-src属性，后者用于放置图片原始url地址的属性。图片本身的src属性，可以选择留空，也可以添加“图片无法显示”的提示图片，比如天猫：之后我们要做的就是将图片显示在用户所在的位置向下滑动（最好早一点显示，这里就不提前了）//首先需要引入一个jQuery库//获取需要懒加载的图片var$picDelay=$(".img-delay");//监听窗口上的滑动事件$(window).scroll(function(){varscrollTop=$(window).scrollTop();//SlideracrossDistancevarscreenHeight=screen.height;//屏幕浏览器内容部分的高度//计算每张图片的位置是否满足要求$picDelay.each(function(idx,ele){var$ele=$(ele);//当scrollTop+screenHeight===ele.offsetTop,图片刚好出现在上边缘if(scrollTop+screenHeight>=ele.offsetTop){$ele.attr("src",$ele.attr("data-src")).removeAttr('data-src').removeClass("img-delay");}});//当所有图片加载完成后，移除该事件if($(".img-delay").length<=0){$(window).unbind("scroll");}});
