Home > Web Front-end > JS Tutorial > Introduction to the lazy loading method of images using JavaScript

Introduction to the lazy loading method of images using JavaScript

巴扎黑
Release: 2017-08-22 17:22:44
Original
1537 people have browsed it

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;)
}
Copy after login

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>
Copy after login

Assign the real address to the picture


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

Full code


##

var scrollElement = document.querySelector(&#39;.page&#39;),
  viewH = document.documentElement.clientHeight;
function lazyload(){
 var nodes = document.querySelectorAll(&#39;img[src]&#39;);
 Array.prototype.forEach.call(nodes,function(item,index){
  var rect;
  if(item.dataset.src===&#39;&#39;) 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);
    }
  };
};
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template