js implements delayed loading of web page images to improve web page opening speed_javascript skills

There are many ways to improve the loading speed of web pages. Using jquery.lazyload.js to implement asynchronous lazy loading of images will be a good method to improve the speed of web page opening for websites with a lot of images on the page. On the left side of the column list on the Code Jun website, you can see an article thumbnail display module when previewing on the PC, which will prolong the loading time of the web page to a certain extent. This article uses the asynchronous delayed loading method of images to improve the page loading speed of this website.

Pictures are loaded asynchronously, which means that it is not necessary to load and display all the pictures on the page at once. When the user slides the scroll bar to a certain position, the picture at the corresponding position will be loaded and displayed. This can greatly improve the loading speed of the web page. Further improve user experience.

There are many technical articles with a lot of pictures. If all the pictures are required to be loaded at once when opening the web page, the user will definitely have to wait for a very long time. This approach will make the user experience very bad, and there is no need to load all the images on the page at once. Asynchronous lazy loading of images is the most reasonable and appropriate approach in web design.

We use jquery.lazyload.js to implement asynchronous lazy loading of images. Remember to load jQuery first.

1. Import JS plug-in:

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.lazyload.js"></script>

2. Insert JavaScript code into the page:

$(document).ready(function($){
$("img").lazyload({
placeholder:"grey.gif", //加载图片前的占位图片
effect:"fadeIn" //加载图片使用的效果(淡入)
});
});

Through the above two steps, you can easily implement asynchronous delayed loading of web page images.

Let me give you a detailed introduction:
Sometimes we see some large websites. If the page has many pictures, when you scroll to the corresponding row, the pictures in the current row are loaded immediately. In this way, when the page is opened, only the pictures in the visible area are added, and the other pictures are not added. Hidden images are not loaded, which speeds up page loading. This solution is better for longer pages.

Recommended: Use the jquery image lazy loading plug-in jquery.lazyload to achieve image delay

Implementation principle:

Change all images that need to be delayed loaded into the following format:

<img lazy_src="图片路径" border="0"/>

Then when the page loads, save all the images using lazy_src into an array, then calculate the top of the visible area when scrolling, and then make the top of the delayed-loaded images smaller than the current visible area (i.e. the image The src value of the image appearing in the visible area is replaced with lazy_src (load the image):

JS code:

 lazyLoad = (function() {
 
  var map_element = {};
 
  var element_obj = [];
 
  var download_count = 0;
 
  var last_offset = -1;
 
  var doc_body;
 
  var doc_element;
 
  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() {
 
    var all_element = [];
 
    //从所有相关元素中找出需要延时加载的元素
 
    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("lazy_src")) {
 
          element_obj.push(all_element[key]);
 
        }
 
      }
 
    }
 
  
 
    for (var i = 0,
 
len = element_obj.length; i < len; i++) {
 
      var o_img = element_obj[i];
 
      var t_index = getAbsoluteTop(o_img); //得到图片相对document的距上距离
 
      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;
 
    //可视化区域的offtset=document的高+
 
    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;
 
    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("lazy_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();
 
  };
 
  return {
 
    init: init
 
  }
 
})();

How to use: Change the src of the image that needs to be delayed loaded on the page to lazy_src, then put the above js at the end of the body, and then call: lazyLoad.init();
The method of teasing can use firebug to check whether the temporary image is delayed loading.
Also:
If there is a column with content switching on your page, the images in the content may not be displayed when switching. The solution is to load the images separately during the content, such as:

///切换内容的代码…
 
 chlid.find("img[init_src]").each(function(){
 
  $(this).attr("src",$(this).attr("init_src"));
 
  $(this).removeAttr("init_src");
 
 });

The so-called asynchronous loading of images means that you don’t have to load all the images at once. You can call it delayed loading or buffered loading.

Let’s see if you have this need: there are a lot of pictures in an article. If you load all the pictures when loading the article, it will undoubtedly slow down the loading speed and make the user wait longer. Therefore, I want to find such an article. A plug-in that allows the web page to only load images within the browser's field of view. Images that do not appear within the range will not be loaded temporarily and will be loaded gradually when the user slides the scroll bar. lazyload is used to achieve this effect.
Lazyload.js is actually a plug-in for jQuery. Its full name is jquery.lazyload.js. You can tell its function just by looking at its name - it means lazy loading. Since it is written in javascript, it is suitable for all web pages, including WordPress.

If you want to use lazyload, you must first load jQuery, which relies on jQuery to achieve effects.

The above is the entire content of this article. I hope everyone has a deeper understanding of js to implement delayed loading of web page images.