画像の遅延読み込みメソッドの純粋な JavaScript 実装_JavaScript スキル

最近、以前に書いたいくつかの便利なプラグインを整理し始めました...^-^!!!

特に淘宝網や京東などのショッピング Web サイトでは、ページの情報がますます充実し、充実するようになり、ホームページは生命線となっています。 - -||||

最近、私は銀行のウェブサイトの仕事をしていましたが、それをホームページに押し込むことによってのみ、より多くの注目を集めることができるため、さまざまな営業担当者が戦争を鎮めるためにホームページのポジションをめぐって争い始めました。私の寛大で寛容な一面を反映しています、ハハハ

ホームページは彼らのニーズをすべてカバーしており、彼らは満足して帰りました。しかし、技術マネージャーが来て、なぜホームページの負荷が大きいので、減らしてくださいと言いました。 ！ ！

まず最初にやるべきことは、K の写真の枚数を減らすことです。それでも足りない場合はどうすればよいでしょうか? さて、本題に移ります。長いページの表示されていない部分を読み込むことはできません。トラフィックを節約するということは、コストを節約することを意味します。 ！ ！

その目的は、ページ上の画像の位置を決定し、画像の位置が現在の画面の高さより大きいか小さい場合は画像を表示し、それ以外の場合は画像を非表示にすることです。

最初に画像を非表示にする方法は非常に簡単です。画像を表示する必要がある場合は、 を使用します。 element.src=element.getAttribute ("csii_src"); の考え方は非常に単純で、コードを記述するだけです。

function lazyLoad() {
var map_element = {};
var element_obj = [];
var download_count = 0;
var last_offset = -1;
var doc_body = null;
var doc_element = null;
var lazy_load_tag = [];
function initVar(tags) {
doc_body = document.body;
doc_element = document.compatMode == 'BackCompat' ? doc_body
: document.documentElement;
lazy_load_tag = tags || [ "img", "iframe" ];
}
;
function initElementMap() {
for ( var i = 0, len = lazy_load_tag.length; i < len; i++) {
var el = document.getElementsByTagName(lazy_load_tag[i]);
for ( var j = 0, len2 = el.length; j < len2; j++) {
if (typeof (el[j]) == "object"
&& el[j].getAttribute("csii_src")) {
element_obj.push(el[j]);
}
}
}

for ( var i = 0, len = element_obj.length; i < len; i++) {
var o_img = element_obj[i];
var t_index = getAbsoluteTop(o_img);
if (map_element[t_index]) {
map_element[t_index].push(i);
} else {
var t_array = [];
t_array[0] = i;
map_element[t_index] = t_array;
download_count++;
}
}

}
;
function initDownloadListen() {
if (!download_count)
return;
/*var offset = (window.MessageEvent && !document.getBoxObjectFor) &#63; doc_body.scrollTop
: doc_element.scrollTop;*/
var offset;
if(os.firefox){
offset = doc_element.scrollTop;
}else{
offset = doc_body.scrollTop;
}

var visio_offset = offset + doc_element.clientHeight;
if (last_offset == visio_offset) {
// setTimeout(initDownloadListen, 200);
return;
}
last_offset = visio_offset;
var visio_height = doc_element.clientHeight;
var img_show_height = visio_height + offset + 20;
for ( var key in map_element) {
if (img_show_height > key) {
var t_o = map_element[key];
var img_vl = t_o.length;
for ( var l = 0; l < img_vl; l++) {
element_obj[t_o[l]].src = element_obj[t_o[l]]
.getAttribute("csii_src");
}
delete map_element[key];
download_count--;
}
}
// setTimeout(initDownloadListen, 200);
}
;
function getAbsoluteTop(element) {
if (arguments.length != 1 || element == null) {
return null;
}
var offsetTop = element.offsetTop;
while (element = element.offsetParent) {
offsetTop += element.offsetTop;
}
return offsetTop;
}
function init(tags) {
initVar(tags);
initElementMap();
initDownloadListen();
$(window).scroll(function(){
initDownloadListen();
});
}
;
init();
}

欠点は、ページ構造を決定し、画像の高さを設定する必要があることです。そうしないと、画像の上からの高さを計算できません。注意が必要です。

別の友達がどのようにそれを達成したかを見てみましょう

<!-- 
      var temp = -1;//用来判断是否是向下滚动（向上滚动就不需要判断延迟加载图片了） 
       
      window.onscroll = function() { 
      var imgElements = document.getElementsByTagName("img"); 
      var lazyImgArr = new Array(); 
      var j = 0; 
      for(var i=0; i<imgElements.length; i++) { 
       if(imgElements[i].className == "lazy"){ 
        lazyImgArr[j++] = imgElements[i]; 
       } 
      } 
     
              var scrollHeight = document.body.scrollTop;//滚动的高度 
      var bodyHeight = document.body.offsetHeight;//body（页面）可见区域的总高度 
      if(temp < scrollHeight) {//为true表示是向下滚动，否则是向上滚动，不需要执行动作。 
       
       for(var k=0; k<lazyImgArr.length; k++) { 
       var imgTop = lazyImgArr[k].offsetTop;//1305（图片纵坐标） 
       if((imgTop - scrollHeight) <= bodyHeight) { 
        lazyImgArr[k].src = lazyImgArr[k].alt; 
        lazyImgArr[k].className = "notlazy" 
               } 
      } 
       
      temp = scrollHeight; 
     } 
       
    }; 
       
// -->

考え方は次のとおりです。まず、 タグの src の値を非常に小さな画像ファイルのパスに設定し、alt 属性の値をスクロール時に表示される実際の画像ファイルのパスに設定します。画像の位置まで移動するとき、実際に表示される画像が自動的に読み込まれるように、srcの値をaltの値に置き換えます。同時に、ラベルにlazyの値を持つクラスを設定します。ロード後、その値を notlazy に設定して、どのイメージをロードする必要があるか、どのイメージをロードしないかを決定します。

コード内のコメントは非常に明確なので、ご自身で読んでください。レンガ投げも大歓迎ですし、改善点や改良点の提案も大歓迎です。