懒加载常用的两种方式

技术实现:到可视区域再加载

第一种

引入 jquery.lazyload.js

//谁使用谁启动懒加载

//$("img.lazy").lazyload();

$("img.lazy").lazyload({effect:"fadeIn"});

//实际上只是把src换成data-original

<img class="lazy"data-original="image/timg.jpg"alt="" width="400" height="400">

第二种

轻量级的图片延时加载插件echo.js，如果你的项目中没有使用jquery，建议使用第二种方式

<style>　　.demo img{

　　　　width: 736px;

　　　　height: 490px;

　　　　background: url(images/loading.gif) 50% no-repeat;}

</style>

<divclass="demo">

<imgclass="lazy"src="images/blank.gif"data-echo="images/big-1.jpg">

</div>

<script src="js/echo.min.js"></script>

<script>

Echo.init({ offset: 0,//离可视区域多少像素的图片可以被加载

　　 throttle: 0 //图片延时多少毫秒加载

});

</script>

说明：blank.gif是一张背景图片，包含在插件里了。图片的宽高必须设定，当然，可以使用外部样式对多张图片统一控制大小。data-echo指向的是真正的图片地址。