官網下載地址:http://plugins.jquery.com/lazyload/html
要引入兩個文件,注意這些事html中包含着jquery
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.lazyload.js"></script>code
而後在query.lazyload.js下面配置一下你用到的htm
<script>
$(function(){
$("img.lazy").lazyload({
placeholder:"./img/loading.gif", //圖片未加載出來時顯示的佔位圖
effect:"show", //展示的方式,經常使用:show顯示\fadeIn閃現
threshold:100, //在距離屏幕多少px時開始加載
event:"scroll", //懶加載的觸發事件,經常使用:click點擊/mouseover鼠標移入/sporty運動/默認爲scroll滑動
container:$("#J-sourceList"), //指定容器內的元素產生效果
failure_limit:5 //加載多少張可見區域外的圖片
});
})
</script>seo
而後建議img的尺寸儘可能統一 那樣直接寫一個class完美,由於這個我發現須要給img配置width height不給的話有可能會不加載事件