Pure javascript implementation of image delayed loading method_javascript skills

Recently I started to sort out some useful plug-ins that I wrote before,...^-^!!!

As the page information becomes more and more rich and full, especially on shopping websites like Taobao and JD.com, the homepage is their lifeline, - -||||

Recently I was working on a bank’s website, and only by squeezing it onto the homepage could it get more attention, so various business staff started fighting for the homepage position in order to quell their war. Reflecting my generous and tolerant side, hahaha

The homepage covered all their needs, and they left with satisfaction. However, the technical manager came and said why the homepage loaded so big, so, reduce it! ! !

The first thing to do is to reduce the number of pictures by K. If it is not enough, what should we do? Okay, let’s get to the point. You can not load the undisplayed parts of long pages. Saving traffic means saving money. Let’s do it! ! !

The idea is to determine the position of the image on the page. If the position of the image is greater than or less than the current screen height, then display the image, otherwise hide the image.

How to hide the image at the beginning? It is very simple. , give an attribute csii_src that the browser does not recognize. When you need to display the image, use element.src=element.getAttribute ("csii_src");, the idea is very simple, just write the 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();
}

The disadvantage is that the page structure must be determined and the height of the image must be set. Otherwise, the height of the image from the top cannot be calculated. Need to pay attention.

Let’s take a look at how another friend achieved it

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

The idea is as follows: first set the value of src in the tag to a very small image file path, and set the value of the alt attribute to the actual image file path to be displayed. When scrolling down to the location of the image When , replace the value of src with the value of alt, so that the actual image to be displayed will be automatically loaded. At the same time, set a class with a value of lazy for the label. After loading, set its value to notlazy. Determine which images need to be loaded and which ones do not.

The comments in the code are very clear, please read it yourself. Throwing bricks is welcome, and suggestions for improvements and improvements are also welcome.