More Personal blogs

Lazy loading

Lazy loading in some websites are common in a wide range of images, a simple example, there are many goods in taobao homepage pictures, user can pull down, but many users are not much, often in the drop-down to jump to other place, if one-time request to load down the front page of all images, which leads to several serious problems:

  1. Affect page loading speed
  2. Waste of user bandwidth
  3. The browser can load other resources in the same domain name in parallel. (There is a limit on the number of resources that the browser can load in parallel.)

Lazy loading implementation principle

Set SRC to the loading path of the image on the page, store the real path, and add tag attributes to the images that are not loaded. Listen for the page scroll event (preferably throttling here), scroll through the unloaded image, get the height of the image from the top of the viewable area, and replace the real URL with SRC if it is less than the page height.

Code implementation

<! DOCTYPE html> <html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Lazyload 1</title>
</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>
    class LazyLoad {
      constructor(){this.clientheight = window.innerheight // viewable height this.initLoad() // Initial load this.bindScrollevent ()}initLoad(){
        this.lazyLoad()
      }
      bindScrollEvent() {letFn = this. Throttle (() = > {enclosing the lazyLoad ()}, 300). / / 300 ms executable a document addEventListener ('scroll', fn)
      }
      lazyLoad() {let images = document.querySelectorAll("img[data-src]")
        Array.from(images).forEach((img) => {
          let offsetTop = this.getPosition(img)
          if(offsetTop < this.clientHeight){
            img.src = img.getAttribute("data-src")
            img.removeAttribute('data-src'.' '}})} getPosition(el){returnEl.getboundingclientrect ().top} throttle(fn, timeout){// throttlelet perious = 0
        return function() {let now = +new Date()
          let args = arguments
          if(now - perious >= timeout){
            perious = now
            fn.apply(this, args)
          }
        }
      }
    }
    let lazyLoadObj = new LazyLoad()
  </script>
</body>
</html>
Copy the code

preload

Preloading is the opposite of lazy loading. Lazy loading is lazy loading. It is loaded only when it needs to be displayed or used. For example, for the opening animation of a website, these animations are composed of many images, if not pre-loaded, it will cause the animation not smooth and flash white screen.

Preloading implementation

HTML implements preloading

Setting rel=”prefetch” on the link tag allows preloading, which is not very compatible.

CSS image preloading

Load images in CSS, but do not display them

#preload { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
Copy the code

JS implementation of preloading

When the JS implementation preloads JS files and CSS files, the tag must be embedded in the page to take effect.

// CSS
var css = document.createElement('link');
css.type = "text/css";
css.rel  = "stylesheet";
css.href = "http://domain.tld/preload.css";
document.body.appendChild(css)

// JS
var js  = document.createElement("script");
js.type = "text/javascript";
js.src  = "http://domain.tld/preload.js";
document.body.appendChild(js)

// img
new Image().src = "http://xxxx.com"
Copy the code

Ajax implements preloading

One of the nice things about Ajax preloading is that you don’t need to create tags to affect the page, but you can have cross-domain problems

var xhr = new XMLHttpRequest();
xhr.open('GET'.'http://xxxx.js');
xhr.send(' ');
Copy the code