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