Front-end: lazy load (image lazy loading) - page optimization that loads and displays a large number of images

Recently, I wrote a page that loads a large number of pictures. Since the server does not give it, I cannot load all the pictures at one time.

So refer to many github examples and blog gardens - the blog of the "snail running a red light" boss to optimize the page,

When you pull down the mouse and browse to a div, the image of that piece is loaded, abbreviated as:

1.　 The lazy load of the image can add a scroll bar event to the invisible area on the page,

Determine the distance between the image position and the top of the browser and the distance between the page. If the former is smaller than the latter, it will be loaded first.

　　What is the problem of lazy loading of pictures:

　　For pages with too many pictures, in order to speed up the page loading speed,
we often need to load the pictures that do not appear in the visible area on the page first, and wait until the scrolling to the visible area. to load.

This will greatly improve the page loading performance and improve the user experience.

2、实现方法<img src="loading.gif" data-src="http://xxx.ooo.com" />

Then get and save the img tag of the page, start a timer, traverse the saved img tag, and
determine whether its position appears in the visible area. If it appears in the visible area, then assign the real src address to it.
And delete it from the array to avoid repeated judgments. So you may ask, how to judge whether it appears in the visible area?
That is, you can get the offset distance of the current img relative to the top of the document minus the distance of scrollTop,
and then compare it with the height of the browser window. If it is smaller than the browser window, it will appear in the visible area,
otherwise, then no.

As shown in the figure, if you pull down, a white pattern will appear, and the next picture will gradually appear.
If
1, the network speed is slow,
2, the computer card
3, the picture recognition error, etc., a small gif picture will be displayed, showing that it is loading

3. Code:

Mainly three js: jquery, jquery.lazyload, urchin

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Lazy Load Enabled With FadeIn Effect</title>
 
  <link href="http://www.appelsiini.net/stylesheets/main2.css" rel="stylesheet" type="text/css" />
 
  <style type="text/css">
  #sidebar {
    width: 0px;
  }

  #content {
    width: 770px;
  }
  
  </style>

</head>

<body>
  <div id="wrap">
    <div id="header">
      <p>
        <h1>Lazy Load</h1><br />
        <small>Image lazy loader plugin for jQuery.</small>
        <ul id="nav">
          <li id="first"><a href="#" class="active">weblog</a></li>
          <li><a href="#" class="active">projects</a></li>
         
        </ul>
      </p>
    </div>
    </div>
  <div class="entry">

    <img src="img/load.gif" data-original="img/one.png" width="750" height="521" alt="京紫1">
    <img src="img/load.gif" data-original="img/two.png" width="580" height="937" alt="京紫2">
    <img src="img/load.gif" data-original="img/three.png" width="750" height="421" alt="动漫1">
    <img src="img/load.gif" data-original="img/four.png" width="510" height="287" alt="丹特丽安">
    <img src="img/load.gif" data-original="img/five.png" width="750" height="422" alt="动漫2">
    <img src="img/load.gif" data-original="img/six.png"  width="800" height="436" alt="月山比吕">
  
  </div>

  <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
  <script src="jquery.lazyload.js?v=3" type="text/javascript" charset="utf-8"></script>
  <script src="urchin.js" type="text/javascript"></script>
  <script type="text/javascript" charset="utf-8">
      $(function() {
          $("img").lazyload({
              effect : "fadeIn",
          });
      });
  </script>


</body>
</html>

Hey, the new version of the csdn compiler can't upload photos, so I have to use the external link of the post bar....

Front-end: lazy load (image lazy loading) - page optimization that loads and displays a large number of images

Guess you like