Are you still using jquery. lazyload to load the plug-in for the image split screen?

Baidu searches for "image split-screen loading", and jquery. lazyload is on the eye. I believe many people have used it. Maybe it is still in use. Today I will talk about the serious BUG of this plug-in.

What is image split loading? As the name implies, images are loaded only when they appear in the visible area of the browser. The advantage is that when there are too many pages, you do not need to load them all at once, which greatly improves friendliness and reduces the pressure on the server.

For the demo of jquery. lazyload, you can take a look: demo

We found that the images in the first screen were loaded normally. When the second one was rolled, it gradually became apparent after several seconds. It seemed that there was no big problem. At this time, we will use firebug of Firefox to watch it again. Of course, to ensure the test stability, I used Kingsoft guard to clear the browser cache.

　　

Have you seen it? What is the effect of split-screen loading? There are still two requests. The first screen is an image, but the two images have been loaded. This is not the case. Let's continue to look at it. When I slide the scroll bar to the second picture ......

Nana? The third request appears !!! I have a total of two images. I used jquery. lazyload to download three images, which not only did not reduce the pressure on the server, but increased, which is not obvious.

After that, I read the source code of lazyload. In fact, the logic is okay. I stored the values in the img src in the Custom original attribute, when the image is rolled to the visible area of the browser, the value in original is assigned back to src to load the split screen.

But the problem lies in the call. The call method of lazyload is written in $ (). ready (function () {});, for example:

$().ready(function(){$("#tujie img").lazyload({effect : "fadeIn",failurelimit : 5});});

That is, lazyload is called only after the page is loaded. After the page is loaded, all the images are downloaded. It is no longer necessary to use lazyload. Instead, it will show the situation described above: there were only two images in total, but they were requested three times and three images were downloaded, Which is counterproductive.

There is an article on modifying jquery. lazyload on the Internet. You can search for it, but I tried it and it still didn't work. I just stopped loading it.

The solution to this problem is to change the plug-in. I found another plug-in for screen sharding, called jquery. scrollLoading. For details, refer to this Article "dynamic loading of elements such as scrolling images on jQuery pages". This plug-in truly implements image split screen loading.

PS: If the demo page cannot be opened, you can download the demo package. However, the test needs to be put on the server and open it locally. The effect of three requests cannot be found in firebug. Demo download