Too many pictures on the website will greatly affect the opening speed. If there are too many pictures, the user may run away before all pictures are loaded. But sometimes pictures are necessary. Apart from shrinking the pictures on the website, the number of pictures can no longer be reduced. What should I do?
At this time, lazy loading comes into play. It can delay loading most of the pictures, and only a few pictures in the visible area can be pre-loaded. In this way, the amount of pictures loaded will be greatly reduced and the speed of the website will be greatly improved.
Let’s introduce the lazy loading plugin jquery.lazyload.js for jquery.
Download and import
Download link: https://plugins.jquery.com/lazyload/
<script type=”text/javascript” src=”jquery.min.js”></script>
<script type=”text/javascript” src=”jquery.lazyload.min.js”></script>
Define the path yourself.
Picture attribute settings:
Modify the image attribute that needs to be lazy loaded to <img class=”lazy” data-original=”picture address”>, the class name can be self-defined or not filled in, if not filled in, the js code needs to be written as $(” img”).lazyload(); Sometimes some lazy loading is required, so it is not applicable.
JS code:
$(“.lazy”).lazyload();
The main parameters of jquery.lazyload.js:
$(“img.lazy”).lazyload({
placeholder: “img/grey.gif”, //Place a place in advance with pictures
// placeholder, the value is a picture path. This picture is used to occupy the position of the picture to be loaded. When the picture is loaded, the placeholder will be hidden
effect: “fadeIn”, // load which effect to use
// effect (special effect), the values are show (direct display), fadeIn (fade in), slideDown (drop down), etc., commonly used fadeIn
threshold: 200, // start loading early
// threshold, the value is a number, which represents the height of the page. If set to 200, it means that the scroll bar will start to load the image when it is 200 from the target position, which can prevent users from noticing
event:’click’, // load only when the event is triggered
// event, the values are click (click), mouseover (mouse over), sporty (sports), foobar (…). It can be realized that the mouse is over or clicked to start loading, the latter two values are not tested…
container: $(“#container”), // Achieve effects on pictures in a container
// container, the value is a container. lazyload takes effect when the scroll bar of the browser is pulled by default. This parameter allows you to load the pictures in a DIV in turn when you pull the scroll bar of a certain DIV
failurelimit: 10 // When the image sort is disordered
// failurelimit, the value is a number. By default, lazyload will not continue to load when it finds the first picture that is not in the visible area, but when the HTML container is chaotic, it may happen that the picture in the visible area is not loaded, failurelimit means Load N pictures outside the visible area to avoid this problem.
});