js實(shí)現(xiàn)圖片懶加載效果
更新時(shí)間：2017年07月17日 08:40:44 作者：信爾奕驕
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片懶加載效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js圖片懶加載的具體代碼，供大家參考，具體內(nèi)容如下
圖片懶加載，思路:當(dāng)鼠標(biāo)滑動(dòng)到對(duì)應(yīng)圖片的高度時(shí)，進(jìn)行圖片的加載；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div{
width: 575px;
height: auto;
overflow: hidden;
border: red 1px solid;
margin: 0 auto;
/*給該div設(shè)置定位*/
position: relative;
}
#div img{
width: 267px;
height: 396px;
margin-left: 10px;
border: 1px solid #000;
}
</style>
<script type="text/javascript">
function getPos(obj){
var l = 0;
var t = 0;
while(obj){
l += obj.offsetLeft;
t += obj.offsetTop;
obj = obj.offsetParent;
}
return {left:l ,top : t}
}
window.onload = window.onscroll = function(){
//獲取到img
var aImg = document.getElementsByTagName("img");
//獲取到它的scrollTop 值 考慮兼容問題
var oScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// clientHeight = 上下padding + height
var clientH = document.documentElement.clientHeight;
//循環(huán)遍歷每一項(xiàng)通過(guò)調(diào)用獲取到每一個(gè)i 項(xiàng)對(duì)象的top 值
for (var i = 0;i<aImg.length;i++) {
var aImgTop = getPos(aImg[i]).top;
// 當(dāng)滾動(dòng)的時(shí)候進(jìn)行判斷,看他的滾動(dòng)的高度加上它的clientHeight 是否比它的 top 值大
// 如果大或等于說(shuō)明滾動(dòng)到當(dāng)前位置可以加載圖片
if (oScrollTop + clientH >= aImgTop) {
// 進(jìn)行圖片的加載
aImg[i].src = aImg[i].getAttribute("_src");
}
}
}
</script>
</head>
<body>
<div id="div">
<img _src="../img/1.jpg"/>
<img _src="../img/2.jpg"/>
<img _src="../img/3.jpg"/>
<img _src="../img/4.jpg"/>
<img _src="../img/6.jpg"/>
<img _src="../img/7.jpg"/>
<img _src="../img/1.jpg"/>
<img _src="../img/2.jpg"/>
<img _src="../img/3.jpg"/>
<img _src="../img/4.jpg"/>
<img _src="../img/6.jpg"/>
<img _src="../img/7.jpg"/>
<img _src="../img/3.jpg"/>
<img _src="../img/4.jpg"/>
<img _src="../img/6.jpg"/>
<img _src="../img/7.jpg"/>
</div>
</body>
</html>
當(dāng)有類似于瀑布流的布局時(shí)常用的加載模式
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js/jquery控制頁(yè)面動(dòng)態(tài)加載數(shù)據(jù) 滑動(dòng)滾動(dòng)條自動(dòng)加載事件的方法
下面小編就為大家?guī)?lái)一篇js/jquery控制頁(yè)面動(dòng)態(tài)加載數(shù)據(jù) 滑動(dòng)滾動(dòng)條自動(dòng)加載事件的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
JavaScript反轉(zhuǎn)數(shù)組常用的4種方法
這篇文章主要給大家介紹了關(guān)于JavaScript反轉(zhuǎn)數(shù)組常用的4種方法,反轉(zhuǎn)數(shù)組可以將數(shù)組中的元素順序顛倒過(guò)來(lái),從而達(dá)到一些特定的需求,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
這篇文章主要介紹了JS自定義右鍵菜單實(shí)現(xiàn)代碼解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
javascript中callee與caller的區(qū)別分析
有些小伙伴可能會(huì)問caller,callee 是什么？在javascript 中有什么樣的作用？那么本篇會(huì)對(duì)于此做一些基本介紹。希望能夠?qū)Υ蠹依斫鈐avascript中的callee與caller有所幫助。2015-04-04
這篇文章主要介紹了詳解webpack loader和plugin編寫，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
這篇文章主要介紹了JS前端模塊化原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了JS前端模塊化具體概念、功能、原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
JavaScript將數(shù)字轉(zhuǎn)換成大寫中文的方法
這篇文章主要介紹了JavaScript將數(shù)字轉(zhuǎn)換成大寫中文的方法,涉及javascript字符串及匹配的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
JS獲取鼠標(biāo)坐標(biāo)、獲取鼠標(biāo)像素點(diǎn)示例
運(yùn)行代碼之后隨意移動(dòng)鼠標(biāo)的位置，可適時(shí)顯現(xiàn)鼠標(biāo)的坐標(biāo)點(diǎn)，不占用系統(tǒng)資源2014-03-03
在日常編碼中,我們通常關(guān)注代碼的邏輯和功能,但很少深入思考編譯器在幕后的工作,今天我們將學(xué)習(xí)一下LHS（Left-Hand Side）和RHS（Right-Hand Side）查詢,它們?cè)贘avaScript編譯和執(zhí)行中的關(guān)鍵作用,以及在我們的日常開發(fā)中是如何發(fā)揮作用的,需要的朋友可以參考下2023-11-11
JS實(shí)現(xiàn)模擬風(fēng)力的雪花飄落效果
這篇文章主要介紹了JS實(shí)現(xiàn)模擬風(fēng)力的雪花飄落效果,可在右側(cè)填入風(fēng)力值點(diǎn)擊按鈕即可看到伴隨風(fēng)力的雪花飄落效果,同時(shí)右側(cè)有實(shí)時(shí)雪花數(shù)量統(tǒng)計(jì)功能,需要的朋友可以參考下2015-05-05