Implementation methods and ideas for lazy loading of javascript images_javascript skills

The example in this article introduces how to delay loading images through javascript, and shares it with you for your reference. The specific content is as follows

When a web page contains a large number of images, if all images are loaded at the beginning, it will inevitably cause performance and efficiency problems, and users may leave due to long waiting time.

At this time, we need to use lazy loading, that is, delayed loading of images, to improve the affinity of the website.

1. Lazy loading of images

The basic idea is as follows:
Set custom attributes such as lazy-src for images that need to be loaded lazily, and the path to the image source exists. Then put all the images that need to be lazy loaded into an array, and determine whether the array content appears in the user's sight during window.onscroll. If it does, assign the custom attribute content to the src attribute of the image.

Let’s talk about the implementation steps in detail.
First, we need to define a function that returns the browser’s visible area position:

  /**
   * @description: 返回浏览器的可视区域位置
   * @return: left:左滑轮距离，top：上滑轮距离，width：可见区域宽度，height：可见区域长度
   */
   function getClient(){
    var l,t,w,h;
    l = document.documentElement.scrollLeft||document.body.scrollLeft;
    t = document.documentElement.scrollTop||document.body.scrollTop;
    w = document.documentElement.clientWidth;
    h = document.documentElement.clientHeight;
    return {left:l,top:t,width:w,height:h};
   }

Then define a function to return the location of the resource to be loaded:

/**
   * @description: 返回待加载资源位置
   * @params: p:需要加载的资源节点
   * @return: left:左边距离，top：上边距离，width：宽度，height：高度
   */
   function getSubClient(p){
    var l = 0, t = 0, w, h;
    w = p.offsetWidth;
    h = p.offsetHeight;
    while(p.offsetParent){
      l += p.offsetLeft;
      t += p.offsetTop;
      p = p.offsetParent;
    } 
    return {left:l,top:t,width:w,height:h};
   }

Next define a function to determine whether two rectangular areas intersect:

  /**
   * @decription: 判断两个矩阵是否相交，返回一个布尔值
   * @params: rec1,rec2:需要比较的节点矩阵
   * @return: true： 两矩阵相交
   */
   function contains(rec1,rec2){
    var lc1,lc2,tc1,tc2,w1,h1;
    lc1 = rec1.left + rec1.width/2;
    lc2 = rec2.left + rec2.width/2;
    tc1 = rec1.top + rec1.height/2;
    tc2 = rec2.top + rec2.height/2;
    w1 = (rec1.width + rec2.width)/2;
    h1 = (rec1.height + rec2.height)/2;
    return Math.abs(lc1 - lc2)<w1&&Math.abs(tc1 - tc2)<h1;
   }

Finally, monitor the image resources and load the resources if they enter the user's field of view:

   /**
   * @description: 资源出现在视野中再加载.将资源放入一个数组。
   */
   var arr = document.getElementsByClassName("divX");
   window.onscroll = function(){
    var prec1 = getClient();
    var prec2;
    for(var i = arr.length-1;i>=0;i--){
      if(arr[i]){
        prec2 = getSubClient(arr[i]);
        if(contains(prec1,prec2)){
          //加载资源
          console.log(arr[i].id);
          arr[i].childNodes[0].src = arr[i].childNodes[0].getAttribute("lazy_src");
          delete arr[i];
        }
      }
    }
   }

Of course, this is just an idea. If used in engineering, there are still many flaws, such as performance and compatibility. So I recommend a jquery plug-in: lazyload

1. Determine the css loading is complete

By the way, here is how to judge whether the css file of a web page has been loaded. We know that css is introduced through an external file, which is actually a link node. So we only need to poll to determine the sheet attribute or sheet.cssRules attribute of the link node to determine whether the css file is completely loaded successfully.

2. Determine whether the image is loaded

Similarly, the img tag has a complete attribute, and we only need to poll to view this attribute.

 function imgLoad(img, callback) {
      var timer = setInterval(function() {
        if (img.complete) {
          callback(img)
          clearInterval(timer)
        }
      }, 50)
    }
    imgLoad(img1, function() {
      p1.innerHTML('加载完毕')
    })

3. Determine if javascript loading is complete

So how to judge that javascript is loaded? The onload method of the script node is executed after the loading is completed. IE6 and IE7 can be judged by readyState:

function include_js(file) {
  var _doc = document.getElementsByTagName('head')[0];
  var js = document.createElement('script');
  js.setAttribute('type', 'text/javascript');
  js.setAttribute('src', file);
  _doc.appendChild(js);
  if (!/*@cc_on!@*/0) { //if not IE
    //Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload
    js.onload = function () {
      alert('Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload');
    }
  } else {
    //IE6、IE7 support js.onreadystatechange
    js.onreadystatechange = function () {
      if (js.readyState == 'loaded' || js.readyState == 'complete') {
        alert('IE6、IE7 support js.onreadystatechange');
      }
    }
  }
  return false;
}

The above is the entire content of this article, I hope it will be helpful to everyone’s study.