本文小編為大家詳細(xì)介紹“JavaScript如何實現(xiàn)頁面滾動圖片加載功能”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“JavaScript如何實現(xiàn)頁面滾動圖片加載功能”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

在河間等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計 網(wǎng)站設(shè)計制作按需網(wǎng)站設(shè)計,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站建設(shè),營銷型網(wǎng)站建設(shè),外貿(mào)網(wǎng)站建設(shè),河間網(wǎng)站建設(shè)費(fèi)用合理。

原理：

1.給頁面綁定滾動事件;

2.加載頁面的時候把真正的圖片地址放在某屬性中;

3.然后再滾動過程中判斷元素是否進(jìn)入當(dāng)前瀏覽器窗口內(nèi);

4.***加載圖片，當(dāng)然加載什么，用什哪種用戶體驗都得由你決定;

難點(diǎn)：

瀏覽器兼容是造成難點(diǎn)的原因所在，DOM標(biāo)準(zhǔn)和IE標(biāo)準(zhǔn)，每天前端的工作都在和它們打交道。思考下面的幾段代碼

1.window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop

目的:獲得當(dāng)前頁面相對于窗口顯示區(qū)左上角的 Y 位置.

DOM標(biāo)準(zhǔn):window.pageYOffset;

IE標(biāo)準(zhǔn):window.document.documentElement.scrollTop

2.window.innerHeight ? window.innerHeight : document.documentElement.clientHeight

目的:聲明了窗口的文檔顯示區(qū)的高度和寬度，以像素計.

DOM標(biāo)準(zhǔn):innerheight 和 innerwidth;

IE標(biāo)準(zhǔn):document.documentElement 或 ducument.body (與 DTD 相關(guān))的 clientWidth 和 clientHeight 屬性作為替代

3.obj.getBoundingClientRect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop

目的:獲取頁面元素的位置.

當(dāng)瀏覽器為 非webkit內(nèi)核 時，document.body.scrollTop值恒定為0，使用 document.documentElement.scrollTop才能取到正確值 ;

當(dāng)瀏覽器為 webkit內(nèi)核 時，document.documentElement.scrollTop值恒定為0，使用 document.body;

我還搜索到一種說法是和DTD相關(guān)(即 當(dāng)頁面指定了 DOCTYPE時，使用 document.documentElement ; 當(dāng)頁面沒有指定了 DOCTYPE時，使用 document.body)，請確定知道的朋友幫忙指出下，不勝感謝。

細(xì)節(jié)：

1.因為真正的地址最初是在某屬性中(默認(rèn)是xsrc，可自己設(shè)置)，所以默認(rèn)的圖片地址***是一個像素的透明圖片，這樣可以避免在瀏覽器中出現(xiàn)紅X;

2.在圖片load的時候可以加入等待的圖片，這樣用戶才會知道這里有圖片需要加載，良好的用戶體驗是前端一直所追求的(例子中有體現(xiàn));

3.在圖片load成功后可以加入合適的顯示效果(例子中木有體現(xiàn)，可以自己嘗試);

JavaScript源碼如下：

var scrollLoad = (function (options) {          var defaults = (arguments.length == 0) ? { src: 'xSrc', time: 300} : { src: options.src || 'xSrc', time: options.time ||300};          var camelize = function (s) {              return s.replace(/-(\w)/g, function (strMatch, p1) {                  return p1.toUpperCase();              });          };          this.getStyle = function (element, property) {              if (arguments.length != 2) return false;              var value = element.style[camelize(property)];              if (!value) {                  if (document.defaultView && document.defaultView.getComputedStyle) {                      var css = document.defaultView.getComputedStyle(element, null);                      value = css ? css.getPropertyValue(property) : null;                  } else if (element.currentStyle) {                      value = element.currentStyle[camelize(property)];                  }              }              return value == 'auto' ? '' : value;          };          var _init = function () {              var offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,                  offsetWindow = offsetPage + Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight),                  docImg = document.images,                  _len = docImg.length;              if (!_len) return false;              for (var i = 0; i < _len; i++) {                  var attrSrc = docImg[i].getAttribute(defaults.src),                      o = docImg[i], tag = o.nodeName.toLowerCase();                  if (o) {                      postPage = o.getBoundingClientRect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop; postWindow = postPage + Number(this.getStyle(o, 'height').replace('px', ''));                      if ((postPage > offsetPage && postPage < offsetWindow) || (postWindow > offsetPage && postWindow < offsetWindow)) {                          if (tag === "img" && attrSrc !== null) {                              o.setAttribute("src", attrSrc);                          }                          o = null;                      }                  }              };              window.onscroll = function () {                  setTimeout(function () {                      _init();                  }, defaults.time);              }          };          return _init();      });      scrollLoad();

讀到這里，這篇“JavaScript如何實現(xiàn)頁面滾動圖片加載功能”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。