js簡(jiǎn)單實(shí)現(xiàn)圖片延遲加載的方法
本文實(shí)例講述了js簡(jiǎn)單實(shí)現(xiàn)圖片延遲加載的方法。分享給大家供大家參考,具體如下:
window.onload=window.onresize=window.onscroll=function() { showImg(); }; 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}; } function showImg() { var aTmg=document.getElementsByTagName('img'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollBottom=scrollTop+document.documentElement.clientHeight; for(var i=0;i<aTmg.length;i++) { var p=getPos(aTmg[i]); if(p.top<scrollBottom) { //alert(aTmg); aTmg[i].src=aTmg[i].getAttribute('_src'); } } }
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- Jquery圖片延遲加載插件jquery.lazyload.js的使用方法
- jquery插件lazyload.js延遲加載圖片的使用方法
- Jquery.LazyLoad.js修正版下載,實(shí)現(xiàn)圖片延遲加載插件
- javascript實(shí)現(xiàn)圖片延遲加載方法匯總(三種方法)
- js圖片延遲加載的實(shí)現(xiàn)方法及思路
- 原生Js頁(yè)面滾動(dòng)延遲加載圖片實(shí)現(xiàn)原理及過(guò)程
- javascript圖片延遲加載實(shí)現(xiàn)方法及思路
- js圖片延遲加載(Lazyload)三種實(shí)現(xiàn)方式
- js實(shí)現(xiàn)首屏延遲加載實(shí)現(xiàn)方法 js實(shí)現(xiàn)多屏單張圖片延遲加載效果
- JS圖片延遲加載插件LazyImgv1.0用法分析【附demo源碼下載】
相關(guān)文章
純js實(shí)現(xiàn)倒計(jì)時(shí)功能
本文主要介紹了通過(guò)js實(shí)現(xiàn)頁(yè)面的倒計(jì)時(shí)功能的思路與方法,具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01ES6學(xué)習(xí)筆記之map、set與數(shù)組、對(duì)象的對(duì)比
這篇文章主要給大家介紹了關(guān)于ES6學(xué)習(xí)筆記之map、set與數(shù)組、對(duì)象對(duì)比的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-03-03詳解用場(chǎng)景去理解函數(shù)柯里化(入門(mén)篇)
這篇文章主要介紹了用場(chǎng)景去理解函數(shù)柯里化(入門(mén)篇),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04JS實(shí)現(xiàn)的圖片選擇順序切換和循環(huán)切換功能示例【測(cè)試可用】
這篇文章主要介紹了JS實(shí)現(xiàn)的圖片選擇順序切換和循環(huán)切換功能,結(jié)合完整實(shí)例形式分析了JavaScript基于事件響應(yīng)與樣式動(dòng)態(tài)操作實(shí)現(xiàn)圖片切換相關(guān)操作技巧,需要的朋友可以參考下2018-12-12jscript之List Excel Color Values
jscript之List Excel Color Values...2007-06-06Javascript 正則表達(dá)式實(shí)現(xiàn)為數(shù)字添加千位分隔符
在項(xiàng)目中做貨幣轉(zhuǎn)換的時(shí)候經(jīng)常需要可以實(shí)現(xiàn)自動(dòng)格式化輸入的數(shù)字,自動(dòng)千位分隔符,在網(wǎng)上也看到一些其他網(wǎng)友的實(shí)現(xiàn)的代碼,感覺(jué)都不是太滿意,于是自己研究了下,分享給大家。2015-03-03