Implémentation javascript pure des compétences de méthode de chargement différé d'image_javascript

Récemment, j'ai commencé à trier quelques plug-ins utiles que j'avais écrits auparavant,...^-^!!!

À mesure que les informations des pages deviennent de plus en plus riches et complètes, en particulier sur les sites Web commerciaux comme Taobao et JD.com, la page d'accueil est leur bouée de sauvetage, - -||||

Récemment, je travaillais sur le site Web d'une banque, et ce n'est qu'en le plaçant sur la page d'accueil qu'il pouvait attirer davantage d'attention, alors divers employés de l'entreprise ont commencé à se battre pour la position sur la page d'accueil afin d'apaiser leur guerre. Reflétant mon côté généreux et tolérant, hahaha

La page d'accueil couvrait tous leurs besoins, et ils sont repartis avec satisfaction. Cependant, le responsable technique est venu et a expliqué pourquoi la page d'accueil était si chargée, alors réduisez-la ! ! !

La première chose à faire est de réduire le nombre de photos par K. Si cela ne suffit pas, que faire ? Bon, entrons dans le vif du sujet. Vous ne pouvez pas charger les parties non affichées de longues pages. Économiser du trafic, c’est économiser de l’argent. ! !

L'idée est de déterminer la position de l'image sur la page. Si la position de l'image est supérieure ou inférieure à la hauteur actuelle de l'écran, alors affichez l'image, sinon masquez l'image.

Comment masquer l'image au début ? C'est très simple. , donnez un attribut csii_src que le navigateur ne reconnaît pas. Lorsque vous avez besoin d'afficher l'image, utilisez. element.src=element.getAttribute ("csii_src");, l'idée est très simple, il suffit d'écrire le 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();
}

L'inconvénient est que la structure de la page doit être déterminée et la hauteur de l'image doit être définie, sinon la hauteur de l'image à partir du haut ne peut pas être calculée. Il faut faire attention.

Voyons comment un autre ami y est parvenu

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

L'idée est la suivante : définissez d'abord la valeur de src dans la balise sur un très petit chemin de fichier image, et définissez la valeur de l'attribut alt sur le chemin réel du fichier image à afficher lors du défilement. jusqu'à l'emplacement de l'image Lorsque , remplacez la valeur de src par la valeur de alt, afin que l'image réelle à afficher soit automatiquement chargée. En même temps, définissez une classe avec une valeur de paresseux pour l'étiquette. Après le chargement, définissez sa valeur sur notlazy. Déterminez quelles images doivent être chargées et lesquelles ne le sont pas.

Les commentaires dans le code sont très clairs, veuillez le lire vous-même. Lancer des briques est le bienvenu, et les suggestions d'améliorations et d'améliorations sont également les bienvenues.