js簡(jiǎn)單實(shí)現(xiàn)圖片延遲加載的方法

更新時(shí)間：2016年07月19日 16:30:20 作者：leejersey

這篇文章主要介紹了js簡(jiǎn)單實(shí)現(xiàn)圖片延遲加載的方法,涉及javascript針對(duì)頁(yè)面元素的遍歷與動(dòng)態(tài)設(shè)置技巧,需要的朋友可以參考下

本文實(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)容感興趣的讀者可查看本站專題：《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ì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

js繼承call()和apply()方法總結(jié)
本文介紹了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à)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-02-02
原生javascript實(shí)現(xiàn)文件異步上傳的實(shí)例講解
下面小編就為大家?guī)?lái)一篇原生javascript實(shí)現(xiàn)文件異步上傳的實(shí)例講解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
js判斷游覽器類(lèi)型及版本號(hào)的代碼
今天分析一下, 終于找到原因. 舊版本的js文件寫(xiě)的瀏覽器判斷有異常, 所以導(dǎo)致插入點(diǎn)一直在頭部. 今天修復(fù)之
2014-05-05
js實(shí)現(xiàn)宇宙星空背景效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)宇宙星空背景效果的方法,實(shí)例分析了javascript中動(dòng)畫(huà)效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
可以用來(lái)調(diào)試JavaScript錯(cuò)誤的解決方案
我們?cè)跁?shū)寫(xiě)js的過(guò)程中，經(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í)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-01-01
使用Javascript開(kāi)發(fā)sliding-nav帶滑動(dòng)條效果的導(dǎo)航插件
這篇文章主要介紹了使用Javascript開(kāi)發(fā)sliding-nav帶滑動(dòng)條效果的導(dǎo)航插件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-03-03