Use Image lazy loading and swiper image loading in combination with swiper

Use Image lazy loading and swiper image loading in combination with swiper

I have a scum, and the technology is average. I keep my notes. Don't try it. You can leave optimization suggestions. Thank you.

Recently, I just made a presentation-type website using a swiper framework. Because there are many images, loading for the first time is a little slow. Although it has been compressed, it should be optimized as much as possible, I first found a plug-in to be loaded. But I didn't expect to use it with swiper. I wrote a method myself, but the principle is the same, that is, in addition to loading images on the first screen, swiper does not load images on other pages, that is, the src attribute is not assigned a value, and the image is being loaded every time it slides to the next screen, it can optimize the slow loading for the first time.

First, except for the normal loading of images on the first screen, the img labels on other pages are written normally, but src is not assigned a value. The custom attribute data-original = "img/secondPage/2_text.png ", the value of the custom attribute is the image to be loaded by src in your img.

Of course, we can see that there is a data-original @ 2x attribute. In fact, it is obvious that this will be explained later.

Then js defines a function.

This function needs to pass a value, that is, index of each page under swiper, And Then loop the img of each page, and assign the value of data-original to src through attr, of course, you will see a judgment, you can also see that it is to judge the pixel ratio of the device, and then load images of different multiples, which is the reason for the above definition of data-original @ 2x

Finally, swiper has a method called onSlideChangeStart, which is executed when each screen is changed,

　　

The index value can be obtained through the swiper attribute. When sliding, the image on the next screen can be loaded. Of course, the image on the first screen is loaded in advance, so yes! When 0

 

Please leave valuable suggestions. Thank you.