Pictures lazy loading (front-end)

Reprinted: https: //blog.csdn.net/idongchen/article/details/81145279

Lazyload the front-end performance optimization
Lazyload Introduction
First, the realization of ideas
Second, the code is
three, then optimization
Lazyload Profile
front-end work, the interface and the effects are becoming more and more mad pull cool at the same time also have to mention performance issues. Some projects, long pages, images, rich in content. Like a mall page. The disposable loading if the synchronization is loaded, it is certainly to wait until the flowers are gone, loading turn people collapse ~. Today is Lazyload sharing technology is a delay in loading techniques. Let the page load speeds approaching dancing, relieve pressure on the server, saving traffic, enhance the user experience.

First, the realization of ideas
long page, limited viewable area of the screen.
Img src attribute value is not set tag page or placeholder to refer to the same FIG.
There is a custom attribute img tag, as the actual address of the image: "data-url".
Listening scroll, you scroll to a location, dynamic url will replace the actual "data-url".

Second, the codes
html portion (simple schematic lower structure

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Lazyload</title>
    <style type="text/css">
      .mob-wrap li{list-style: none;width: 100%;height: 345px;}
    </style>
  </head>
  <body>
    <ul class="mob-wrap">
      <li">
        <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/sharesdk-logo.jpg"><p>ShareSDK轻松实现社会化功能</p>
      </li>
      <li">
        <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/sms-logo.jpg "> <p> SMS codes the SDK </ P> 
      </ Li> 
      <Li" > 
        <IMG class = "IMG-TAMP" Alt = "loading" = src-the Data "HTTP: // mob.com/public/images/index/rec-logo.jpg"><p>MobLink seamlessly link the Web and App </ the p-> 
      </ li> 
    </ ul> 
  </ body> 
</ HTML>

Process briefly

Start - "listen scroll event -" from the top height <scrollTop it? - "url replace the data-url -" End

js part

var AIMG = [ 
  { "the src": "http://mob.com/public/images/index/sharesdk-logo.jpg", "TXT": "ShareSDK easy socialization function"}, 
  { "the src": "http://mob.com/public/images/index/sms-logo.jpg","txt": "SMS codes the SDK"}, 
  { "the src": "http://mob.com/public/ images / index / rec-logo.jpg " ," txt ":" MobLink Web seamlessly link with App, " } 
]; 
var SLI = '' ; 
Document .getElementsByClassName (" MOB-wrap ") [0] .innerHTML = "" ;
 for (the let I = 0; I <10; I ++ ) { 
  SLI = document.createElement ( "Li" );
  sLi.innerHTML = `<img class="tamp-img" alt="loading" src="./zwt.gif" data-src="${aImg[i%3].src}"><p>${aImg[i%3].txt}</p>`;
  document.getElementsByClassName("mob-wrap")[0].appendChild(sLi);
};

window.onscroll = function () {
  var bodyScrollHeight =  document.documentElement.scrollTop;// body滚动高度
  var windowHeight = window.innerHeight;// 视窗高度
  var imgs = document.getElementsByClassName('tamp-img');
  for (var i =0; i < imgs.length; i++) {
    var imgHeight = imgs[i].offsetTop;pictures from the top height//
    if (imgHeight  < windowHeight  + bodyScrollHeight - 340) {
       imgs[i].src = imgs[i].getAttribute('data-src');
       imgs[i].className = imgs[i].className.replace('tamp-img','');
    }
  }
};

Thank you for watching, get called so hastily 0.0 ~~~ always bad

Third, the re-optimization
without any treatment will inevitably lead to the direct monitoring scroll the mouse wheel when too frequent trigger handler.
If you happen to have consumed a lot of operating performance behavior dom and other processing functions, causing a large number of operations, resulting in slow page change card,
or even crash the browser unresponsive.
Ideas to deal with this problem is to throttle and image stabilization.
The concept throttle function has a very vivid metaphor: when the pick coffee, press a button out of coffee,
followed by pressing the button several times received or that cup of coffee, equivalent to several times by no later kick in.

Conventional throttling is not to say here, described below is executed at least once an in throttling function least every time.

//节流函数
_throttle = (fn, delay, least) => {
    var timeout = null,
  startTime = new Date();
    fn();
    return function() {
    var curTime = new Date();
    clearTimeout(timeout);
    if(curTime - startTime >= least) {
        fn();
        startTime = curTime;
    }else {
        timeout = setTimeout(fn, delay);
    }
    }
}

Use of a throttle function

function Compare () {
   var bodyScrollHeight = document.documentElement.scrollTop; // body rolling height 
  Console. log (bodyScrollHeight + "src alternative method" )
   var windowHeight = window.innerHeight; // window height 
  var imgs = document.getElementsByClassName ( 'TAMP -IMG ' );
   for ( var I = 0; I <imgs.length; I ++ ) {
     var imgHeight imgs = [I] .offsetTop; // image height from the top 
    IF (imgHeight <windowHeight bodyScrollHeight + - 340. ) { 
       imgs [ I] .src imgs = [I] .getAttribute ( 'the src-Data' );
       imgs[i].className = imgs[i].className.replace('tamp-img','');
    }
  }
}
window.onscroll = _throttle(compare, 350,600);

Scroll time leastlonger than 600, call compare, or 350ms delay execution.
Such direct onscroll performance relative to further enhance, in function without any problems.
Different business scenarios and least adjust the delay can be.

Pictures lazy loading (front-end)

Guess you like