WordPress uses jquery.lazyload.js image lazy loading plugin to improve website opening speed

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:


The main parameters of jquery.lazyload.js:

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.

Related Article
How to add user defined upload avatar function in WordPress

Friends who use WordPress to build a website should know that WordPress itself does not have the function of uploading Read more

How to get the number of articles and comments of the current logined user in WordPress

When developing WordPress Theme user center, I want to get the number of articles and comments of current logged in Read more

WordPress tips: get statistics of the number of pictures in the article

As far as I know, WordPress has no function to count the number of pictures in the article, so to Read more

WordPress details optimization to automatically add ALT and title information to the article image

Friends who know a little bit about SEO optimization should understand that image ALT and image title optimization are very Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image