Reine Javascript-Implementierung der Methode zum verzögerten Laden von Bildern_Javascript-Fähigkeiten

Vor kurzem habe ich damit begonnen, einige nützliche Plug-Ins auszusortieren, die ich zuvor geschrieben habe,...^-^!!!

Da die Seiteninformationen immer reichhaltiger und vollständiger werden, insbesondere auf Shopping-Websites wie Taobao und JD.com, ist die Homepage ihre Lebensader, - -||||

Kürzlich arbeitete ich an der Website einer Bank, und nur dadurch, dass ich sie auf die Homepage drängte, konnte sie mehr Aufmerksamkeit erregen, also begannen verschiedene Geschäftsmitarbeiter, um die Position auf der Homepage zu kämpfen, um ihren Krieg zu unterdrücken. Das spiegelt meine großzügige und tolerante Seite wider, hahaha

Die Homepage deckte alle ihre Bedürfnisse ab und sie gingen zufrieden. Der technische Manager kam jedoch und sagte, warum die Homepage so stark geladen wurde, also reduzieren Sie sie! ! !

Das erste, was wir tun müssen, ist, die Anzahl der Bilder um K zu reduzieren. Wenn das nicht ausreicht, was sollen wir dann tun? Okay, kommen wir zur Sache. Sie können die nicht angezeigten Teile langer Seiten nicht laden. Traffic sparen bedeutet, Geld zu sparen. ! !

Die Idee besteht darin, die Position des Bildes auf der Seite zu bestimmen. Wenn die Position des Bildes größer oder kleiner als die aktuelle Bildschirmhöhe ist, wird das Bild angezeigt, andernfalls wird das Bild ausgeblendet.

Wie verstecke ich das Bild am Anfang? Es ist sehr einfach, ein Attribut csii_src anzugeben, das der Browser nicht erkennt element.src=element.getAttribute ("csii_src");, die Idee ist sehr einfach, schreiben Sie einfach den Code.

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();
}

Der Nachteil besteht darin, dass die Seitenstruktur bestimmt und die Höhe des Bildes festgelegt werden muss. Andernfalls kann die Höhe des Bildes von oben nicht berechnet werden. Muss aufpassen.

Schauen wir uns an, wie ein anderer Freund es geschafft hat

<!-- 
      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; 
     } 
       
    }; 
       
// -->

Die Idee ist wie folgt: Setzen Sie zunächst den Wert von src im Tag auf einen sehr kleinen Bilddateipfad und setzen Sie den Wert des Alt-Attributs auf den tatsächlichen Bilddateipfad, der beim Scrollen angezeigt werden soll bis zum Speicherort des Bildes. Ersetzen Sie den Wert von src durch den Wert von alt, damit das tatsächlich anzuzeigende Bild automatisch geladen wird. Legen Sie gleichzeitig eine Klasse mit dem Wert „lazy“ für die Beschriftung fest. Setzen Sie nach dem Laden den Wert auf notlazy. Bestimmen Sie, welche Bilder geladen werden müssen und welche nicht.

Die Kommentare im Code sind sehr klar, bitte lesen Sie sie selbst. Das Werfen von Ziegelsteinen ist willkommen, aber auch Verbesserungs- und Verbesserungsvorschläge sind willkommen.