Without further ado, just look at the example
First of all, the way to write picture marks
<img data-src="/images/image.jpg">
You need to put the address of the image into the data-src attribute, and src value is not needed, so you can directly remove src attribute.
CSS Code
For all images with data-src attribute, we will initially display the status as invisible, adjusting 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 remove data-src attribute and replace it with the src attribute, but this is the action after the image is loaded successfully:
[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) { img.setAttribute('src', img.getAttribute('data-src')); img.onload = function() { img.removeAttribute('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.