Introduction to the lazy loading method of images using JavaScript

Image lazy loading is also called image delayed loading and lazy loading, which means loading images when users need to use them. This can reduce requests, save bandwidth, and increase page loading speed. In contrast, it can also reduce server pressure. The following is passed This article will share with you how to implement lazyload for images. Friends who are interested should take a look.

Definition

Lazy loading of images is also known as Delayed loading and lazy loading of images means loading images when users need to use them. This can reduce requests, save bandwidth, increase page loading speed, and in turn, reduce server pressure.

Lazy loading is a manifestation of the humanization of the program. It improves the user experience and prevents the loading of large amounts of data at one time. Instead, it makes resource requests based on user needs.

The difficulty in implementing

is to determine whether a certain picture is a resource that the user needs. In the browser, what the user needs is resources in the visual area, so we only need to determine whether the image has been presented in the visual area. When the image is presented in the visual area, obtain the real address of the image and assign it to the image (the image width and height need to be specified , can be processed by padding).

Judge whether it exists in the visual area

Browser viewport height

The distance between the resource to be loaded and the top of the viewport

Just pass the above two points Determine whether the image is within the visible area.

var nodes = document.querySelectorAll('img[src]'),
  elem = nodes[0],
  rect = elem.getBoundingClientRect(),
  vpHeight = document.documentElement.clientHeight;
if(rect.top < vpHeight && rect.bottom>=0) {
 console.log(&#39;show&#39;)
}

Get the real address of the picture afterward

<img src="loading.gif" alt="" src="1.gif">
...
<script data-filtered="filtered">
  var src = elem.dataset.src;
</script>

Assign the real address to the picture

var img = new Image();
img.onload = function(){
 elem.src = img.src;
}
img.src = src;

Full code

##

var scrollElement = document.querySelector('.page'),
  viewH = document.documentElement.clientHeight;
function lazyload(){
 var nodes = document.querySelectorAll('img[src]');
 Array.prototype.forEach.call(nodes,function(item,index){
  var rect;
  if(item.dataset.src==='') return;
  rect = item.getBoundingClientRect();
  if(rect.bottom>=0 && rect.top < viewH){
    (function(item){
     var img = new Image();
     img.onload = function(){
      item.src = img.src;
     }
     img.src = item.dataset.src
     item.dataset.src = &#39;&#39;
    })(item)
  }
 })
}
lazyload();
scrollElement.addEventListener(&#39;scroll&#39;,throttle(lazyload,500,1000));
function throttle(fun, delay, time) {
  var timeout,
    startTime = new Date();
  return function() {
    var context = this,
      args = arguments,
      curTime = new Date();
    clearTimeout(timeout);
    if (curTime - startTime >= time) {
      fun.apply(context, args);
      startTime = curTime;
    } else {
      timeout = setTimeout(fun, delay);
    }
  };
};

The above is the detailed content of Introduction to the lazy loading method of images using JavaScript. For more information, please follow other related articles on the PHP Chinese website!