JavaScript implementation of picture Delay loading method Rollup (three methods) _javascript skills

Source: Internet
Author: User

See some large Web sites, pages if there are many pictures of the time, 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. The principle is this: the picture below the page is not loaded, wait until the user scroll down to the picture position, and then load. What are the benefits of doing this? --When the page has several screen content, it is possible that the user only look at the first few screen content, so we can only load users need to see the picture, reduce the server to the user browser to send picture files generated by the load, the following three ways to introduce JS implementation of the picture delay loading.

JS implementation of the picture delay loading method One:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >  

JS implementation of the Web page image delay loading method two:

Before you put the code before you tell us the next JS to achieve the principle of delay loading of pictures.

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.geteleme
      Ntsbytagname (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); Gets the distance of the picture relative to the document 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 original ecological JS realizes the picture delay loading method Three:

 <!doctype html> 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.