Simple way to implement image lazy loading and fading effect by JS

Without further ado, just look at the example

First of all, the way to write picture marks

<img data-src="/images/" alt="">

You need to put the address of the picture atdata-src In the attribute,srcThe value is not needed, justsrcRemove attributes.

CSS Code

All havedata-srcFor the image of the attribute, we will initially display the status as invisible, adjust it through transparency:

img {
 opacity: 1;
 transition: opacity 0.3s;
}

img[data-src] {
 opacity: 0;
}

What is the purpose of writing this way? When the picture loads, you will be able to see the effect.

JavaScript Code

We will eventually data-src Remove the attribute and replace it with the src attribute, but this is the action after the image is loaded successfully:

[].(('img[data-src]'), function(img) {
 ('src', ('data-src'));
  = function() {
 ('data-src');
 };
});

Compared with other various image delay loading technologies, this method is very simple. It requires almost no other conditions and can be used anywhere. It is very flexible to use.

But it should be noted that simplicity has the best or bad, and it will also be insufficient because of simplicity. It does not have the function of scrolling pictures into the visual window and then loading them. Which technology to use in the end depends on the scenario.

The above is all about this article, I hope it will be helpful to everyone's work and study.