How to implement lazy loading images

First, what is lazy loading

The first image src assigned a default picture, when the user scrolls the scroll bar to the visible area of the picture when loaded again follow the true picture

If the user is only interested in the first picture, and that the rest of the picture can save the request

Second, why should the introduction of lazy loading

Lazy loading (LazyLoad) is an effective way to optimize front-end, greatly enhance the user experience. Picture has been a page to load large stray, now a picture has a few megabytes is a normal thing, much larger than the size of the code. If a ajax request 10 pictures address, the 10-time images are loaded out, it is certainly unreasonable.

Third, lazy loading property involved

1, document.documentElement.clientHeight; // represents a highly visible area of your browser:

document.body.clientHeight // is the height of the entire page content, rather than the highly visible area of the browser

2, document.documentElement.scrollTop; // scroll bar is scrolled height:

chrome roll over in document.body.scrollTop // scroll bar height

So to get the scrollbar height: there is a trick:

　　var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;

　　These two values will always be a constant zero, so do not worry about the impact on the real cause of scrollTop. A little skill, but very practical.

3、 offsetTop、offsetLeft

　　obj.offsetTop obj refers to the location or distance above the upper control, integer pixels.

　　obj.offsetLeft means obj distance left or upper position control, integer pixels.

　　obj.offsetWidth means obj width control itself, integer pixels.

　　obj.offsetHeight obj control itself refers to the height of integer pixels.

offsetParent different from parentNode, offsetParent returns in the structural hierarchy with the most recent position this element is absolute \ relative \ static element or body

Specific attribute values involved in rolling, please refer https://blog.csdn.net/zh_rey/article/details/78967174 very detailed

Fourth, implement lazy loading

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lazyload 2</title>
    <style>
    img {
        display: block;
        margin-bottom: 50px;
        height: 200px;
    }
    </style>
</head>
<body>
    <img src="images/loading.gif" data-src="images/1.png">
    <img src="images/loading.gif" data-src="images/2.png">
    <img src="images/loading.gif" data-src="images/3.png">
    <img src="images/loading.gif" data-src="images/4.png">
    <img src="images/loading.gif" data-src="images/5.png">
    <img src="images/loading.gif" data-src="images/6.png">
    <img src="images/loading.gif" data-src="images/7.png">
    <img src="images/loading.gif" data-src="images/8.png">
    <img src="images/loading.gif" data-src="images/9.png">
    <img src="images/loading.gif" data-src="images/10.png">
    <img src="images/loading.gif" data-src="images/11.png">
    <img src="images/loading.gif" data-src= "Images / 12.png" > 
    

< Script > 
    function Throttle (Fn, Delay, atleast) { // function bound to a scroll event, when the page scroll function is to avoid high frequency triggered, 
        var timeout =  null , / / debounces process 
        the startTime =  new new a Date ();
         return  function () {
           　　var curTime =  new new a Date (); 
        　　　　the clearTimeout (timeout); 
       　　　　 IF (curTime - the startTime > = atleast) { 
        　　    Fn (); 
           　　 the startTime = curTime;
        　　　　} The else { 
           　　　　 timeout = the setTimeout (Fn, Delay); 
        　　　　} 
        } 
    } 
    function lazyload () {
         var Images = document.getElementsByTagName ( ' IMG ' );
         var len     = images.length;
         var n-       =  0 ;       // store pictures loaded to position, each time to avoid traversing the first picture from the         
        return  function () {
        　　　　var seeHeight = document.documentElement.clientHeight;
       　　　　  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
     　　　　   for(var i = n; i < len; i++) {
           　　　　 if(images[i].offsetTop < seeHeight + scrollTop) {
               　　　　 if(images[i].getAttribute('src') === 'images/loading.gif') {
               　　　　　　  images[i].src = images[i].getAttribute('data-src');
               　　　　 } 
           　　　　　　 N- = n- +  . 1 ; 
            　　　　} 
        　　　　} 
        } 
    } 
    var LoadImages = lazyload (); 
    LoadImages ();           // initialize the home page image 


    window.addEventListener ( ' Scroll ' , Throttle (LoadImages, 500 , 1000 ), to false );
　　/ / function of throttle (throttle) and debounce function (debounce) process, 
// delay of 500ms and 1000ms interval, and when it exceeds 1000ms the function is not triggered, the function is executed immediately, or delay the execution of the function 500ms 
    </ Script > 
</ body>
</html>

Reference article:

https://www.cnblogs.com/rlann/p/7296660.html

https://blog.csdn.net/xiongzhengxiang/article/details/7551598

https://blog.csdn.net/zh_rey/article/details/78967174

How to implement lazy loading images

Guess you like