If a web page is very long and has many pictures, it takes a lot of time to download the picture, which will affect the loading speed of the entire web page. This lazy loading plug-in will load the pictures you need to see through your scrolling situation, and then it will request the download of the picture from the background and finally display it. Through this plug-in, you can download the picture when you need to display it, which can reduce the pressure on the server and improve the page loading speed.
Lazy Load plugin principle
Modify the src attribute of the target img element to the organic attribute, thereby interrupting the loading of the image. Detect the scrolling state, then restore the src attribute of img in the visual area of the web page and then load the picture, thus creating a buffer loading effect. Code introduction method:
<script type="text/javascript" src="js/jquery-1.8."></script>
<script type="text/javascript" src="js/"></script>
<script type="text/javascript">
$(document).ready(
function($){
$("img").lazyload({
placeholder : "images/", //The placeholder image before loading the picture
effect : "fadeIn" //The effect used to load the picture (fadeIn)
});
});
</script>
But now, many Javascript giants have analyzed that this plug-in does not really play a role in slowing loading. This is true, and the official has also given instructions and solutions.
In fact, the reason is that in the new version of the browser, even if we delete the src attribute controlled by Javascript, the browser will still load this image.
So how should we solve it? In fact, it is also very simple. You need to directly modify the HTML structure, add new attributes to the img tag, point the value of the src attribute to the placeholder image, add the data-original attribute, and let it point to the real image address. for example:
<img src="img/" data-original="img/" >
Of course, in the above code, we delay load all images in the page, but sometimes we don't want this, because some images do not expect them to be delayed, so we can just do this:
If only buffering images under load class main
$(".main img").lazyload({
placeholder : "images/",
effect : "fadeIn"
});
Load the image with lazy class:
$("").lazyload({
placeholder : "images/",
effect : "fadeIn"
});
Others and so on, just make the selector adjustment appropriately.
Advanced usage method:
The following part comes from the official documents, which provides a simple translation of the official documents.
A more comprehensive approach
We have to think about this question. We define such a structure so that the source image will not be loaded in the web page. This source image will only be displayed when Javascript executes. If the user's browser does not support it or the user turns off the Javascript-enabled option, then our image cannot be displayed. That is, our images cannot be displayed without Javascript support.
To deal with this problem, we need to introduce the noscript tag. The general idea is as follows: use noscript to include the real image location, and when the browser does not support Javascript, the image will be displayed directly.
<img class="lazy" src="img/" data-original="img/" width="640" heigh="480">
<noscript><img src="img/" width="640" heigh="480"></noscript>
For existing images, hide them and use the show() method to trigger display.
.lazy {
display: none;
}
In this way, if the browser does not support Javascript, our customized img will not appear, and the image in the noscript will be displayed. The specific implementation code is as follows:
$("").show().lazyload();
Loading in advance
The default situation is that when you scroll to the image position, the plugin starts loading. In this way, the user may first see a blank image and then slowly appear. If you want to load this image in advance before the user scrolls, you can configure the parameters.
$("").lazyload({
threshold : 200
});
The threshold parameter is used to load in advance. The above statement means that when there are 200 pixels left from the picture, the picture will start loading.
Custom trigger events
The default trigger event is scrolling. When you scroll, it will check and load. You can use the event attribute to set your own loading event, and then you can customize the conditions that trigger this event and then load the image.
$("").lazyload({
event : "click"
});
Customize the display effect
The default image achieves the effect, which means there is no effect, and it will be displayed directly after the download is completed. This user experience is not good. You can set the effect attribute to control the effect of displaying the image. For example
$("").lazyload({
effect : "fadeIn"
});
The effect of fadeIn is to change the transparency of the picture and gradually appear.
Insert the image into a container
If you use a smartphone, you often go to the application website to download the application. They usually use a horizontal container and put some screenshots of your phone. Using the container attribute, buffering loading can be easily implemented in the container. First, we need to define this container with css and then load it with this plugin.
#container { height: 600px; overflow: scroll; }
$("").lazyload({
container: $("#container")
});
Loading invisible images
Some images are invisible, so we add images with attributes such as display:none; to them. By default, this plugin will not load hidden invisible images. If we need to load invisible images with it, we need to set skip_invisible to false, the code is as follows:
$("").lazyload({
skip_invisible : false
});
OK, this is a brief introduction to this plugin.