Lazyload.js reduces the load of images

You may have heard of the delayed loading of images. In fact, this jquery plug-in has been used by qqdie's blog for a long time. This plug-in is only 4K! However, there is a disadvantage that the images in the article do not use delayed loading. The problem is that this jquery plug-in can <img> The requirements for the structure of must be as follows:

 <img data-orignal="xxxx.png" src="img/grey.gif" >

Explain this structure: src It stores placeholders, data-orignal The real picture address is stored. When you scroll to the image location, the plug-in will assign the real address to src , and the image will be loaded. It is a delayed loading strategy.

This structure Pictures with fixed structure (For example, the avatar in the comment area or some other pictures with fixed structure) It's easy to change it yourself, but for Pictures in the article How to automatically generate this structure is a headache. It is not humanized to let users manually add pictures in the background editor~

At first, I wanted to get all the pictures through js, and then data-orignal The attribute is assigned as src The value of, and then src All attributes are assigned to img/grey.gif 。 The code is actually very simple, as follows:

 //Inert loading of pictures in the text var imgs = $(".wrapper-lg img"); for (var i = 0; i < imgs.length; i ++) { var srcvalue = $(imgs[i]).attr("src"); $(imgs[i]).attr("data-original",srcvalue); $(imgs[i]).attr("src","<?php $this->options->themeUrl("img/grey.gif") ?>"); }

The effect is very awkward. The original picture comes out first, and then the interface flashes, and the picture becomes a bitmap.???
This will put the cart before the horse and will not work! If you can't delay the loading of article images, this plug-in is not very useful!

Just when I was about to give up, I found this article [LazyLoad+ob_start(), which perfectly solves the problem of image delay loading [jQuery plug-in]]（ http://www.rainleaves.com/html/1248.html ）, the author provides a new method: Change the image attribute when loading the page through php's ob_start() function 。 about ob_start(); The principle of function is introduced in the original blog article, so I will not repeat it. Here is how to use it:

stay footer.php in

 <? php //Relevant processing of image delay loading, replace src with data original, and add placeholder $echo = ob_get_contents(); // Get buffer content ob_clean(); // Clear buffer content, not output to the page $placeholder = "img/grey.gif"; // Placeholder Picture $preg = "/<img (.*)src(.*) \/>/i"; // Match picture regularly $replaced = '<img \\1src="'.$placeholder.'" data-original\\2 />'; print preg_replace($preg, $replaced, $echo); // Rewritten buffer ob_end_flush(); // Enter the buffer into the page and close the buffer ?>

The code is also very easy to understand, that is, set the page All pictures (Not all in fact) src and data-original The value of.

Last use

 $("img").lazyload();

You can achieve the effect of delayed loading.

So here comes the question... ！

I don't want to delay loading all the pictures. What should I do? In fact, the regular matching above hides a Blacklist mechanism ！

The html structure of the image is

 <img src="" (other html code)/>

That is, the image tag End Label / If before No space , it will not be successfully matched by the regular expression, and the load will not be delayed.

Well, in this way, I solved all the problems I encountered!

The last thing you need to know is the common settings for delayed loading:

  • Load special effects: the pictures will be displayed in fading mode (see the official documents for more special effects)
 $("img").lazyload({ effect : "fadeIn" });
  • Trigger loading method: you can select to click the picture to display the content
 $("img").lazyload({ event : "click" });

Of course, there are some more interesting settings that you can refer to the official documentation.

Plug in address: tuupola/ jquery_lazyload

By the way, if you Blacklist mechanism If you have any better ideas, please discuss them together.

Last modification: February 5, 2017
© Allow specification reprint
Do you like my article?
Don't forget to praise or appreciate, let me know that you accompany me on the way of creation.