Pelaksanaan javascript tulen bagi kaedah pemuatan tertangguh imej_kemahiran javascript

Baru-baru ini saya mula menyusun beberapa pemalam berguna yang saya tulis sebelum ini,...^-^!!!

Apabila maklumat halaman menjadi semakin kaya dan penuh, terutamanya di tapak web beli-belah seperti Taobao dan JD.com, halaman utama adalah talian hayat mereka, - -||||

Baru-baru ini saya sedang mengusahakan tapak web bank, dan hanya dengan menekannya ke halaman utama ia boleh mendapat lebih perhatian, jadi pelbagai kakitangan perniagaan mula berjuang untuk kedudukan halaman utama untuk memadamkan perang mereka. Mencerminkan sisi saya yang pemurah dan bertolak ansur, hahaha

Halaman utama merangkumi semua keperluan mereka, dan mereka pergi dengan berpuas hati Namun, pengurus teknikal datang dan berkata mengapa halaman utama dimuatkan begitu besar, jadi, kurangkan! ! !

Perkara pertama yang perlu dilakukan ialah mengurangkan bilangan gambar dengan K. Jika tidak mencukupi, apa yang perlu kita lakukan? Anda tidak boleh memuatkan bahagian yang tidak dipaparkan pada halaman panjang Menyimpan trafik bermakna menjimatkan wang. ! !

Ideanya adalah untuk menentukan kedudukan imej pada halaman Jika kedudukan imej lebih besar daripada atau kurang daripada ketinggian skrin semasa, kemudian paparkan imej, jika tidak sembunyikan imej.

Bagaimana untuk menyembunyikan imej pada mulanya? Ia sangat mudah , berikan atribut csii_src yang tidak dikenali oleh penyemak imbas element.src=element.getAttribute ("csii_src");, idea ini sangat mudah, hanya tulis kod.

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

Kelemahannya ialah struktur halaman mesti ditentukan dan ketinggian imej mesti ditetapkan jika tidak, ketinggian imej dari atas tidak boleh dikira. Perlu ambil perhatian.

Mari kita lihat bagaimana rakan lain mencapainya

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

Ideanya adalah seperti berikut: mula-mula tetapkan nilai src dalam teg kepada laluan fail imej yang sangat kecil, dan tetapkan nilai atribut alt kepada laluan fail imej sebenar untuk dipaparkan turun ke lokasi imej Apabila , gantikan nilai src dengan nilai alt, supaya imej sebenar yang akan dipaparkan akan dimuatkan secara automatik Pada masa yang sama, tetapkan kelas dengan nilai malas untuk label. Selepas memuatkan, tetapkan nilainya kepada notlazy Tentukan imej mana yang perlu dimuatkan dan yang mana tidak.

Komen dalam kod sangat jelas, sila baca sendiri. Melempar batu bata dialu-alukan, dan cadangan untuk penambahbaikan dan penambahbaikan juga dialu-alukan.