1. Lazy loading

1. What is lazy loading

Lazy loading, also known as lazy loading, refers to the lazy loading of images on long web pages, and is a great way to optimize web page performance. Images outside the visual area do not load until the user scrolls to them. This is the opposite of image preloading, and using lazy loading on long web pages will make the page load faster. In some cases, it can also help reduce server load. Often applicable to a lot of pictures, the page is long e-commerce site scene.

2. Why use lazy loading

  • It can improve the user experience. Imagine that when users open a long page like mobile Taobao, if all the pictures on the page need to be loaded, due to the large number of pictures, the waiting time is very long, users will inevitably complain, which will seriously affect the user experience.
  • Reduce the load of invalid resources, which can significantly reduce the server pressure and traffic, but also to reduce the burden of the browser.
  • Prevent the concurrent loading of resources too much will block the load of JS, affecting the normal use of the website.

3. Lazy loading principle

First, set the SRC attribute of the image on the page to an empty string, and the real path of the image is set in the data-original attribute. When the page is scrolling, it is necessary to listen for scroll event. In the callback of scroll event, Determine whether our lazily loaded images enter the visual area. If the image is in the visual area, set the SRC attribute of the image to the value of data-original, so that lazy loading can be realized.

4. Lazy loading steps

<html lang="en">
<head>
    <meta charset="UTF-8"> <title>Lazyload</title> <style> .image-item { display: block; margin-bottom: 50px; height: 200px; </style> </head> <body> <img SRC ="" class="image-item" lazyload="true"  data-original="images/1.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/2.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/3.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/4.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/5.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/6.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/7.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/8.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/9.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/10.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/11.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/12.png"/ > < script > var viewHeight = document. The documentElement. ClientHeight / / access to highly visible areafunction lazyload() {var eles = document. QuerySelectorAll ('img[data-original][lazyload]'(eles) Array. The prototype. The forEach. Call,function(item,index){
var rect
if(item.dataset.original==="")
   returnThe rect = item. GetBoundingClientRect () / / used to obtain an element in the page, left, right and down relative to the location of the browser window, respectivelyif(rect.bottom>=0 && rect.top < viewHeight){
!function(){
  var img=new Image()
  img.src=item.dataset.original
  img.onload=function(){item.src=img.src} item.removeAttribute (){item.src=img."data-original") // Remove the attribute from the item.removeAttribute ("lazyload")}}}}) () the lazyload () / / haven't started rolling screen, want to trigger a function first, initialize the page page picture document. The addEventListener ("scroll"</script> </body> </ HTML >Copy the code

2. Preloading

1. What is preloading

Resource preloading is another performance optimization technique that can be used to inform the browser in advance that certain resources are likely to be used in the future. Preloading simply means that all required resources are requested to be loaded locally in advance, so that they can be retrieved directly from the cache later when needed.

2. Why use preloading

Before the entire page loads, some main content is loaded to provide users with a better experience and reduce waiting time. Otherwise, if the content of a page is too large, a page without preloading will appear blank for a long time until all the content is loaded.

3. Several ways to implement preloading

  • Using HTML tags

<img src="http://pic26.nipic.com/20121213/6168183 0044449030002.jpg" style="display:none"/>

  • Using an Image object

<script src="./myPreload.js"></script>

Var image= new image () image.src="http://pic26.nipic.com/20121213/6168183 004444903000 2.jpg"
Copy the code
  • Using the XMLHttpRequest object gives you fine control over the preloading process, although there are cross-domain issues
var xmlhttprequest=new XMLHttpRequest();
xmlhttprequest.onreadystatechange=callback;
xmlhttprequest.onprogress=progressCallback;
xmlhttprequest.open("GET"."http://image.baidu.com/mouse,jpg".true);
xmlhttprequest.send();
function callback() {if(xmlhttprequest.readyState==4&& xmlhttprequest.status==200){
    var responseText=xmlhttprequest.responseText;
  }else{
     console.log("Request was unsuccessful:"+xmlhttprequest.status); }}function progressCallback(e){
e=e || event;
if(e.lengthComputable){
console.log("Received"+e.loaded+"of"+e.total+"bytes")}}Copy the code
  • Using PreloadJS library

PreloadJS provides a consistent way to preload content for use in HTML applications. Preloading can be done using HTML tags as well as XHR. By default, PreloadJS will try to load content using XHR because it provides better support for progress and completion events, but due to cross-domain issues, tag-based loading may be better.

// Use preload.js var queue=new createjs.loadQueue (); // The default is an XHR object, if the new createjs.loadQueue (false) is an HTML tag that can be used across queue.on("complete",handleComplete,this);
queue.loadManifest([
{id:"myImage",src:"http://pic26.nipic.com/20121213/6168183 0044449030002.jpg"}, {id:"myImage2"SRC:"http://pic9.nipic.com/20100814/2839526 1931471581702.jpg"}]);function handleComplete(){
  var image=queue.getResuLt("myImage");
  document.body.appendChild(image);
}
Copy the code

Lazy loading vs. preloading

Both are effective ways to improve page performance, the main difference between the two is that one is loaded early, and the other is slow or even not loaded. Lazy loading relieves the pressure on the server front end, while preloading increases the pressure on the server front end.

If you want to learn more about how to optimize your page performance, check out the page performance optimization options

4. Reference articles

Lazy and preloading (js)

Lazy loading and preloading