Plugin full version address M-lazy

Lazy loading of Web images is the dynamic loading of images by reading the IMG element, then obtaining the value of the IMG element’s data-src attribute and assigning it to the IMG SRC attribute.

The important thing to note here is that img does not have the SRC attribute set during initialization, because browsers will try to load images even if SRC = “is set.

A simple image lazy loading involves two aspects,

1. The HTML

We first need to add the specified class to the img element for lazy loading, in this case m-lazyload, and assign img SRC to the data-src attribute. Specific examples are as follows:

Copy the code

2. The JavaScript implementation

Dynamic loading is divided into the following steps, each of which is broken down into separate functions

1. Add a page scroll listening event
window.addEventListener('scroll', _delay, false);

function _delay() {
  clearTimeout(delay);
  delay = setTimeout(function () {
    _loadImage();
  }, time);
}Copy the code
2. This command is executed when the listening event is triggered_loadImageFunction, which is responsible for loading images
function _loadImage() { for (var i = imgList.length; i--;) { var el = imgList[i]; if (_isShow(el)) { el.src = el.getAttribute('data-src'); el.className = el.className.replace(new RegExp("(\\s|^)" + _selector.substring(1, _selector.length) + "(\\s|$)"), " "); imgList.splice(i, 1); }}}Copy the code

The _loadImage function is executed, but we need to know which images need to be loaded.

The basis is to determine whether the picture is in the visible area of the current window, here we encapsulate a _isShow function to achieve

function _isShow(el) {
  var coords = el.getBoundingClientRect();
  return ( (coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
}Copy the code

From there a closed loop of image loading is formed

When the page scroll event is triggered -> perform the loading image operation -> determine whether the image is in the visible area -> Yes, then dynamically assign the value of data-src to the image.

Too easy?

That’s the truth!!

As simple as that, you might as well extend it

  1. Add some custom parameters. Everyone loves customizations, right?

  2. Support iScroll, iScroll is a high performance, low resource footprint, dependency free, multi-platform javascript rolling plug-in.

We’ve made some optimizations here

  1. Remove the selector after the image is loaded to avoid repeated judgments.

  2. Caching img elements in combination reduces dom element query performance loss

  3. Prototype extension adds the getNode method to support lazy loading of paging data (since we cached dom elements earlier)

OK! Show me the code!

(function () {var imgList = [], // img delay, // setTimeout offset, // img delay, // img delay, // img delay, // img delay, // img delay, // img delay, // img delay Load time, // delay load time _selector; -lazyLoad function _isShow(el) {var coords = el.getBoundingClientRect(); return ( (coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset)); } function _loadImage() { for (var i = imgList.length; i--;) { var el = imgList[i]; if (_isShow(el)) { el.src = el.getAttribute('data-src'); el.className = el.className.replace(new RegExp("(\\s|^)" + _selector.substring(1, _selector.length) + "(\\s|$)"), " "); imgList.splice(i, 1); } } } function _delay() { clearTimeout(delay); delay = setTimeout(function () { _loadImage(); }, time); } function ImageLazyload(selector, options) { var defaults = options || {}; offset = defaults.offset || 0; time = defaults.time || 250; _selector = selector || '.m-lazyload'; this.getNode(); _delay(); If (defaults.iscroll) {defaults.iscroll. On ('scroll', _delay); defaults.iScroll.on('scrollEnd', _delay); } else { window.addEventListener('scroll', _delay, false); } } ImageLazyload.prototype.getNode = function () { imgList = []; var nodes = document.querySelectorAll(_selector); for (var i = 0, l = nodes.length; i < l; i++) { imgList.push(nodes[i]); }}; }) ();Copy the code