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
What all junior WordPress developers should know

Anyone calling themselves a junior WordPress developer should know HTML and CSS, some basic PHP, and how WordPress works. That’s Read more

Get HD cover images of youtube videos in various sizes

How to get the url of Youtube video cover image: Just copy the cover image address below, and then replace Read more

Can’t connect to local MySQL server through socket ‘/tmp/mysql.sock’

Cannot connect to Mysql through /tmp/mysql.sock. The reason is that this socket does not exist. Two versions of mysql are Read more

How to change the default word length of summary of the function the_excerpt() in WordPress

The WordPress summary function the_excerpt() default display number of words can be modified as the following:

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