JS to achieve the Web page image delay loading to improve the speed of _javascript skills

There are many ways to increase the speed of Web page loading, using Jquery.lazyload.js to achieve asynchronous delay loading of pictures, for pages containing more pictures of the site, will be a good way to improve the speed of the Web page open. Code June Site Column page list to the left, in the PC side preview can see an article thumbnail display module, to a certain extent, will extend the load time page. This paper adopts the method of asynchronous delay loading of pictures to improve the loading speed of the page.

Picture asynchronous loading, that is, you do not have to load all the pictures of the page to display, such as users sliding scroll to a certain location will be loaded to display the corresponding location of the picture, so that it can improve the speed of the Web page loading, and further enhance the user experience.

There are a lot of technical articles of the map is very many, if you open the Web page when the request can be loaded to complete all the pictures, the user waiting time must be very long. This makes the user experience very bad, and there's no need to load all the pictures on the page at once. The asynchronous delay loading of the picture is the most reasonable and appropriate approach in web design.

We use Jquery.lazyload.js to implement the picture asynchronous delay loading, remember to load jquery first.

1, Import JS plugin:

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

2, insert JavaScript code in the page:

$ (document). Ready (function ($) {
$ ("img"). Lazyload ({
placeholder: "grey.gif"/////////////////////////)
FadeIn "//Load effect (fade in) of picture used)
;
};

Through the above two steps, can simply realize the Web page image asynchronous delay loading.

To give you a specific introduction:
Sometimes we see a lot of large web sites, and if there are many pictures on the page, when you scroll to the corresponding row, the current line of the picture is loaded immediately, such as the page in the open only add visual area of the picture, while other hidden pictures are not loaded, a certain program to speed up the speed of the page loading, for the longer page, This is a better plan.

Recommendation: use jquery image delay load plugin jquery.lazyload implement picture delay

Implementation principle:

Change all of the pictures that need to be loaded for a delay into the following format:

Then, when the page loads, all the pictures that use lazy_src are saved to the array, then the top of the viewable area is computed when scrolling, and the value of the src of the picture in the delay-loaded picture is less than the current visible region (that is, the picture appears in the viewable area) with the Lazy_ SRC to replace (load picture):

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 = []; Find the element for delay loading from all relevant elements for (var i = 0, len = lazy_load_tag.length i < len; i++) {var el = Document.get
 
      Elementsbytagname (Lazy_load_tag[i]); for (var j = 0, len2 = el.length J < Len2; J + +) {if (typeof (el[j)) = = "Object" && El[j].getattri
 
        Bute ("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);
 
      Gets the distance of the picture relative to the document from if (Map_element[t_index]) {Map_element[t_index].push (i);
 
        else {///save a queue on distance by T_array = [];
 
        T_array[0] = i;
 
        Map_element[t_index] = T_array; download_count++;
 
  The number of pictures that require delay loading}};
 
    function Initdownloadlisten () {if (!download_count) return; var offset = (window. Messageevent &&!document.getboxobjectfor)?
 
    Doc_body.scrollTop:doc_element.scrollTop;
 
    Visual area of the Offtset=document high + 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}}) ();

usage: The page needs to be loaded on the picture src change to become lazy_src, and then put the above JS to the body of the last side, and then call: Lazyload.init ();
The Flirt method can use Firebug to see if the picture is delayed loading.
Other than that:
If you have content on the page of the column, you may switch the contents of the picture may not be displayed, the processing method is in the content of the individual image loading processing, such as:

Switch code
 
 for content ... Chlid.find ("img[init_src]"). each (function () {
 
  $ (this). attr (' src ', $ (this). attr ("init_src"));
 
  $ (this). Removeattr ("Init_src");
 
 });

The so-called picture asynchronous loading , meaning that you do not have to load all the pictures at once, you can call it delayed loading, buffering load is OK.

See if you have this kind of demand: a lot of pictures of an article, if you load the article in all the pictures, will undoubtedly delay loading speed, so that users can wait longer, so, I want to find such a plug-in, so that the Web page only load browser view of the picture, does not appear in the scope of the picture on the temporary does not load, Wait for the user to slide the scroll bar and then gradually load, lazyload is used to achieve this effect.
Lazyload.js is in fact a jquery plug-in, the full name is Jquery.lazyload.js, see its name to know its role-is lazy load meaning. Because it's written in JavaScript, it works for all pages, including WordPress.

To use Lazyload, you must first load jquery, which relies on jquery to achieve results.

The above is the entire content of this article, I hope you can realize the Web page of JS delay loading has a more in-depth learning.