JavaScript image Delay loading implementation method and thinking _javascript skill

This article describes how to use JavaScript to delay the loading of pictures, share for everyone to reference, the specific contents are as follows

When a Web page contains a large number of pictures, if the beginning of all the pictures loaded, it is bound to cause problems in performance and efficiency, the user may be waiting for too long to leave.

At this time, we need to use lazy load, that is, delay loading the image of the way to improve the affinity of the site.

Delay Loading picture

The basic ideas are as follows:
Set custom properties for pictures that require deferred loading such as LAZY-SRC, where the source of the picture is located. Then put all of the pictures that need to be lazy load into an array, in the Window.onscroll to determine whether the array content appears in the user's view, if it appears, the custom attribute content to the SRC attribute of the picture.

Let's talk a little more about the implementation steps here.
First, we need to define the function to return the viewable area of the browser:

  /**
   * @description: Return to the viewable area of the browser
   * @return: Left: Left-Hand pulley distance, top: upper pulley distance, Width: visible area width, Height: visible area Length *
   *
   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 the function to return to the location of the resource to be loaded:

/**
   * @description: Return to the resource location to
   be loaded * @params: P: Resource node to be loaded
   * @return: Left: Left-Hand distance, top: Upper distance, 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 the function to determine whether two rectangular areas intersect:

  /**
   * @decription: To determine whether two matrices intersect, return a Boolean value
   * @params: REC1,REC2: The node matrix to be compared
   * @return: true: two matrices
   intersect
   * * * 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)  
 

At last, the image resources are monitored, and the resources are loaded if they enter the user's view:

   /**
   * @description: Resources appear in the field of view and then load. Put resources into an array.
   * *
   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)) {
          //load Resource
          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 about thinking, if used in engineering, there are many defects, such as performance and compatibility. So recommend a jquery plugin:lazyload

1, to determine the completion of CSS loading

Here's how to judge the completion of a Web page's CSS file loading. We know that CSS is introduced through an external file, which is actually a link node. So we just need to poll to determine the link node's sheet attribute or the Sheet.cssrules attribute to determine whether the CSS file is fully loaded successfully.

2, the judgment picture loading completes

Similarly, the IMG tag has a complete attribute that we only need to view by polling.

 function Imgload (IMG, callback) {
      var timer = setinterval (function () {
        if (img.complete) {
          callback (IMG)
          clearinterval (timer)
    }} Imgload (IMG1, function () {
      p1.innerhtml (' Loaded ')
    })

3. Judge JavaScript loading complete

So how do you judge JavaScript loading complete? The OnLoad method of the script node is executed after the load completes. IE6 and IE7 can be judged by the 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.re Adystate = = ' complete ') {
        alert (' IE6, IE7 support Js.onreadystatechange ')
      ;
  }} return false;
}

The above is the entire content of this article, I hope to help you learn.