js簡單實(shí)現(xiàn)圖片延遲加載的方法
更新時(shí)間：2016年07月19日 16:30:20 作者：leejersey
這篇文章主要介紹了js簡單實(shí)現(xiàn)圖片延遲加載的方法,涉及javascript針對(duì)頁面元素的遍歷與動(dòng)態(tài)設(shè)置技巧,需要的朋友可以參考下
本文實(shí)例講述了js簡單實(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)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《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頁面滾動(dòng)延遲加載圖片實(shí)現(xiàn)原理及過程
- 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繼承當(dāng)中的call和apply方法，從定義到常用實(shí)例都做了分析，非常的實(shí)用，推薦給小伙伴們。2014-12-12
Javascript動(dòng)手實(shí)現(xiàn)call,bind,apply的代碼詳解
這篇文章主要為大家詳細(xì)介紹了Javascript動(dòng)手實(shí)現(xiàn)call,bind,apply的代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
原生javascript實(shí)現(xiàn)文件異步上傳的實(shí)例講解
下面小編就為大家?guī)硪黄鷍avascript實(shí)現(xiàn)文件異步上傳的實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
今天分析一下, 終于找到原因. 舊版本的js文件寫的瀏覽器判斷有異常, 所以導(dǎo)致插入點(diǎn)一直在頭部. 今天修復(fù)之2014-05-05
這篇文章主要介紹了js實(shí)現(xiàn)宇宙星空背景效果的方法,實(shí)例分析了javascript中動(dòng)畫效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
可以用來調(diào)試JavaScript錯(cuò)誤的解決方案
我們?cè)跁鴮慾s的過程中，經(jīng)常會(huì)出現(xiàn)一些js錯(cuò)誤，對(duì)于如果找出錯(cuò)誤的解決方法就是關(guān)鍵，下面的文章就是相關(guān)的調(diào)試方法。2010-08-08
JavaScript在for循環(huán)中綁定事件解決事件參數(shù)不同的情況
響應(yīng)一堆相似的事件，但是每個(gè)事件的參數(shù)都不同，在這種情況下就可以使用JavaScript 在for循環(huán)中綁定事件，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-01-01
bootstrap 設(shè)置checkbox部分選中效果
本篇文章主要介紹了bootstrap 設(shè)置checkbox部分選中效果，主要涉及到j(luò)s各個(gè)方面的內(nèi)容，對(duì)于bootstrap設(shè)置checkbox選中效果感興趣的朋友可以參考一下吧2017-04-04
JavaScript遍歷數(shù)組的方法代碼實(shí)例
這篇文章主要介紹了JavaScript遍歷數(shù)組的方法代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
使用Javascript開發(fā)sliding-nav帶滑動(dòng)條效果的導(dǎo)航插件
這篇文章主要介紹了使用Javascript開發(fā)sliding-nav帶滑動(dòng)條效果的導(dǎo)航插件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03