JQuery.lazyload 图片延迟加载
1.引入? jquery.lazyload.js
2. 延時加載的方式?
<script?type="text/javascript">?
$(function()?{?
$("img").lazyload({?
effect?:?"fadeIn"?
});?
});?
</script>?
3.?把閥值設(shè)置成200?意思就是當(dāng)圖片沒有看到之前先load?200像素。
$(“img”).lazyload({?threshold?:?200?});
?
4. ?通過設(shè)置占位符圖片和自定事件來觸發(fā)加載圖片事件。如 event?:sporty?和 event?:?foobar。默認(rèn)情況下處于等待狀態(tài),?直到用戶滾動到窗口上圖片所在位置.?在灰色占位圖片被點擊之前阻止加載圖片。
$("img").lazyload({????
placeholder?:?"img/grey.gif",????
event?:?"click"???
});?
5. ?帶滾動條的?DIV?元素.?你要做的只是將容器定義為?jQuery?對象并作為參數(shù)傳到初始化方法里面.
CSS:
#container?{????
height:?600px;????
overflow:?scroll;????
}???
JavaScript?代碼:
$("img").lazyload({????
placeholder?:?"img/grey.gif",????
container:?$("#container")????
}); ?
?
轉(zhuǎn)載于:https://www.cnblogs.com/yi-miao/p/8079257.html
總結(jié)
以上是生活随笔為你收集整理的JQuery.lazyload 图片延迟加载的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 梦到一条大蛇是什么意思
- 下一篇: ceph 分布式存储安装