Introduction to lazy loading:
Popular introduction: How lazy is lazy loading, that is, if you don't want to see it, I won't show it to you, and I'm too lazy to load it, too lazy to request it. In layman's terms, if you don't want it, I won't give it to you. For example, when entering a certain page, it will have many pictures, and some pictures may be below. When we click on the page but do not scroll down or finish the entire page, then the picture below will be "nothing." With ", it is loaded in vain, and it also reduces the loading speed of the web page. So using lazy loading can only load the current image when scrolling to the visible area.
Principle: The loading of the picture is caused by the value of src. When assigning a value to src, the browser will request the picture resource. Based on this, the html5 attribute data-XXX can be used to save the path of the picture. When we need to load the picture, we will The value of data-xxx is assigned to src, which enables on-demand loading of images, that is, lazy loading.
Advantages: Improve front-end performance, images are only loaded when needed, reduce the burden on services, improve page loading speed, and reduce bandwidth.
Lazy loading implementation:
1. Use jquery-lazyload.js, the jQuery plugin is used for lazy loading and needs to rely on jQuery.
2. Use echo.js: specifically for lazy loading
jquery-lazyload.js implementation
1. Introduce: Introduce jQuery and jQuery-lazyload in HTML, such as:
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
2. The src attribute is not used in the image, because after using the src attribute, the request image will be sent by default, and data-original is used instead, such as:
<img class="lazy" data-original="images/p1.jpg">
3. Add jQuery code:
<script type="text/javascript">
$(function() {
$("img.lazy").lazyload();
})
</script>
Parameters of jquery-lazyload.js:
1.threshold : Set the Threshold parameter to load when scrolling to a distance of xx px from it. Such as:
$(function() {
$("img.lazy").lazyload({
threshold :100
});
})
2. placeholder : a path of an image. This image is used to occupy the position of the image to be loaded. When the image is loaded, the placeholder image will be hidden. For example, put some images waiting to be loaded to optimize the user experience.
$(function() {
$("img.lazy").lazyload({
placeholder: "images/loading.gif"
});
})
3.event : When the defined event is triggered, the picture starts to load (here click means click on the picture to start loading, and mouseover, sporty, foobar...)
$(function(){
$("img.lazy").lazyload({
event : "click"
});
})
4.effects : The effect when the picture is displayed, the default is show.
$(function(){
$("img.lazy").lazyload({
effects:"fadeIn"
});
})
5.container: The value is a container. Lazyload takes effect by default when the browser scroll bar is pulled. This parameter allows you to load the pictures in turn when pulling the scroll bar of a DIV
$(function(){
$("img.lazy").lazyload({
container: $("#container")
});
})
6.failure_limit : Generally used when the pictures in the page are discontinuous. When the page is scrolled, Lazy Load will cycle the loaded pictures. In the loop, it is detected whether the picture is in the visible area. By default, the plugin will find the first Stop looping when an image is not in the visible area. Such as:
$(function(){
$("img.lazy").lazyload({
failure_limit : 20
});
})
Setting it to 20 here means that the plugin will only stop searching when it finds 20 images that are not in the visible area.
7. skip_invisible: In order to improve performance, the plugin ignores hidden pictures by default; if you want to load hidden pictures, set skip_invisible to false;
$(function(){
$("img.lazy").lazyload({
skip_invisible : false
});
})
echojs implementation method:
Introduce: Introduce jQuery and jQuery-lazyload in HTML, such as:
<script type="text/javascript" src="js/echo.min.js"></script>
The src in the picture is replaced by data-echo such as:
<img class="lazy" data-echo="images/p1.jpg">
Add js code:
echo.init({
// How many pixels from the visible area can the image be loaded
offset: 500,
//How many milliseconds the image delay to load
throttle: 1000
});
echo has only two optional parameters:
offset: how many pixels away from the viewable area the image can be loaded
throttle: how many milliseconds the image delays to load