图片延迟加载/JQ懒加载技术

发布于2017年2月25日 21:52:23

目前，网络上各大论坛，尤其是一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度。下面来介绍两种方法：

方法一：js实现图片懒加载

HTML代码：

<div id="div1">
<ul>
<li data-src="http://lihua1108.com/images/goat1.jpeg"></li>
<li data-src="http://lihua1108.com/images/goat2.jpeg"></li>
<li data-src="http://lihua1108.com/images/goat1.jpeg"></li>
<li data-src="http://lihua1108.com/images/goat2.jpeg"></li>
<li data-src="http://lihua1108.com/images/goat1.jpeg"></li>
<li data-src="http://lihua1108.com/images/goat2.jpeg"></li>
<li data-src="http://lihua1108.com/images/goat1.jpeg"></li>
<li data-src="http://lihua1108.com/images/goat2.jpeg"></li>
<li data-src="http://lihua1108.com/images/goat1.jpeg"></li>
<li data-src="http://lihua1108.com/images/goat2.jpeg"></li>
<li data-src="http://lihua1108.com/images/goat1.jpeg"></li>
<li data-src="http://lihua1108.com/images/goat2.jpeg"></li>
<li data-src="http://lihua1108.com/images/goat1.jpeg"></li>
<li data-src="http://lihua1108.com/images/goat2.jpeg"></li>
<li data-src="http://lihua1108.com/images/goat1.jpeg"></li>
<li data-src="http://lihua1108.com/images/goat2.jpeg"></li>
</ul>
</div>

js代码：

function setImg(index){
var oDiv=document.getElementById("div1")
var oUl=oDiv.children[0];
var aLi=oUl.children;
if (aLi[index].dataset) {
var src=aLi[index].dataset.src;
} else{
var src=aLi[index].getAttribute('data-src');
}
var oImg=document.createElement('img');
oImg.src=src;
if (aLi[index].children.length==0) {
aLi[index].appendChild(oImg);
}
}
//获得对象距离页面顶端的距离
function getH(obj) {
var h = 0;
while (obj) {
h += obj.offsetTop;
obj = obj.offsetParent;
}
return h;
}
//当网页的滚动条滚动时要时时判断当前li的位置！
window.onscroll = function () {
var oDiv = document.getElementById('div1');
var oUl = oDiv.children[0];
var aLi = oUl.children;for (var i = 0, l = aLi.length; i < l; i++) {
var oLi = aLi[i];
//检查oLi是否在可视区域
var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
var h = getH(oLi);
if (h < t) {
setTimeout("setImg(" + i + ")", 500);
}
}};
//当页面加载完成以后要主动运行一下window.onscroll，从而获得当前可视范围内的图片
window.onload = function () {
window.onscroll();
};
源文件压缩包下载：方法一下载
方法二：利用jQuery插件lazyload.js

html代码：

<div> <img data-original="http://lihua1108.com/images/goat1.jpeg" src="http://lihua1108.com/images/load.gif"/> <img data-original="http://lihua1108.com/images/goat2.jpeg" src="http://lihua1108.com/images/load.gif"/> <img data-original="http://lihua1108.com/images/goat1.jpeg" src="http://lihua1108.com/images/load.gif"/> <img data-original="http://lihua1108.com/images/goat2.jpeg" src="http://lihua1108.com/images/load.gif"/> <img data-original="http://lihua1108.com/images/goat1.jpeg" src="http://lihua1108.com/images/load.gif"/> <img data-original="http://lihua1108.com/images/goat2.jpeg" src="http://lihua1108.com/images/load.gif"/> <img data-original="http://lihua1108.com/images/goat1.jpeg" src="http://lihua1108.com/images/load.gif"/> <img data-original="http://lihua1108.com/images/goat2.jpeg" src="http://lihua1108.com/images/load.gif"/> <img data-original="http://lihua1108.com/images/goat1.jpeg" src="http://lihua1108.com/images/load.gif"/> <img data-original="http://lihua1108.com/images/goat2.jpeg" src="http://lihua1108.com/images/load.gif"/> <img data-original="http://lihua1108.com/images/goat1.jpeg" src="http://lihua1108.com/images/load.gif"/> <img data-original="http://lihua1108.com/images/goat2.jpeg" src="http://lihua1108.com/images/load.gif"/> </div>

js代码：

<script> var Img = "http://lihua1108.com/images/load.gif"; jQuery.noConflict()(function(){jQuery.noConflict()("img").lazyload({placeholder:Img,effect:"fadeIn"});}); </script>

具体参数解析：

1,用图片提前占位  placeholder : "img/grey.gif",  参数:placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏

 

2,载入使用何种效果  effect : "fadeIn",  参数：effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn

 

3,提前开始加载  threshold : 200,  参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.

 

4,事件触发时才加载  event : "click",  参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…

 

5,对某容器中的图片实现效果  Container: $("#container"),  参数:container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片

 

6,图片排序混乱时  failurelimit : 10,  参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题

源代码文件下载：方法二下载

发表评论