Lazy Load is a jQuery plugin used for lazy loading images. If an article is long and contains many images, downloading them all takes a lot of time. This plugin detects your scrolling behavior and only requests and downloads an image from the server when you are about to view it, then displays it. Using this plugin, images are only downloaded when they need to be shown, which reduces server load and avoids unnecessary resource downloads. If a user never scrolls down to see the images below, downloading them would be a waste.
How the Lazy Load Plugin Works
It modifies the target img’s src attribute to an original attribute, thereby interrupting image loading. It detects the scroll state, then restores the src attribute of visible img elements in the viewport to load images, creating a lazy loading effect.
However, many JavaScript experts have analyzed and concluded that this plugin does not actually achieve true lazy loading. Indeed, the official documentation has acknowledged this and provided solutions.
Cause of the issue: In newer browsers, even if you remove the JavaScript-controlled src attribute, the browser will still load the image.
Solution: Directly modify the HTML structure by adding a new attribute to the img tag. Point the src attribute to a placeholder image, and add a data-original attribute pointing to the actual image URL.
For example: <img data-original=“img/example.jpg” src=“img/grey.gif”>
Thus, we need to analyze the plugin’s pros and cons before deciding whether to use it.
Pros of using it:
- Must follow this structure to be effective; output needs to be defined accordingly.
- Saves server resources and provides a better user experience.
- If images are large, it takes a while to download when the user scrolls to the target position.
Cons of not using it:
- Increases server load and wastes system resources.
Whether to use it or not depends on your actual needs. If you have few images, you don’t need it. If you have many images, you may want to consider it. However, if you do use it, you’ll need to manually add this attribute to every img tag, which is a bit more work. This plugin is used on the Stalker m blog, though not with the official recommended structure — they only wanted the lazy loading effect.
Getting Started with lazyload.js
Step 1: Load the required files.
Obviously, you need to load jQuery and this plugin. You can use the following code to load these files:
<script src="jquery.js" type="text/javascript"></script><script src="jquery.lazyload.js" type="text/javascript"></script>Step 2: Define the image structure.
Following the official recommendation, define your img structure:
<img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">Step 3: Trigger the plugin to take effect.
Activate it as follows, and you can use it on your target:
$("img.lazy").lazyload();Advanced Usage of lazyload.js
The following sections are from the official documentation, with a simple translation provided below.
A More Considerate Approach
We must consider the following issue. With the structure defined above, the original image will not be loaded on the page. Only when JavaScript executes will the source image be displayed. If the user’s browser does not support JavaScript or the user has disabled JavaScript support, then our image will not be displayed. In other words, without JavaScript support, our images simply won’t appear.
To address this issue, we need to introduce the noscript tag. The general idea is: use noscript to contain the actual image location; when the browser does not support JavaScript, display the image directly. For the existing image, hide it and use the show() method to trigger display. This way, if the browser does not support JavaScript, our custom img will not appear, and the image inside noscript will be displayed instead. The specific implementation code is as follows:
<img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"> <noscript><img src="img/example.jpg" width="640" heigh="480"></noscript><script type="text/javascript"></script>$("img.lazy").show().lazyload();</script>Preloading
By default, the plugin starts loading when you scroll to the image position. This means the user may first see a blank image, which then slowly appears. If you want to preload the image before the user scrolls to it, you can configure a parameter.
$("img.lazy").lazyload({ threshold : 200 });The threshold parameter is used for preloading. The statement above means that loading begins when the image is 200 pixels away from the viewport.
Custom Trigger Event
The default trigger event is scrolling — when you scroll, it checks and loads. You can use the event property to set your own loading event, after which you can customize the conditions that trigger this event to load images.
$("img.lazy").lazyload({ event : "click" });Custom Display Effect
The default image display effect is no effect at all — once downloaded, the image appears immediately. This is not a great user experience. You can set the effect property to control how the image is displayed. For example:
$("img.lazy").lazyload({ effect : "fadeIn" });The fadeIn effect gradually changes the image’s opacity, making it appear with a fade-in effect. Demo: effect demo page
Loading Images into a Container
If you use a smartphone, you’ve likely visited app stores where they often use a horizontal container to display phone screenshots. Using the container property, you can easily implement lazy loading within a container. First, we need to define this container with CSS, then use the plugin to load it. Demo: vertical
#container { height: 600px; overflow: scroll; }$("img.lazy").lazyload({ container: $("#container")});Loading Invisible Images
Some images are invisible — they have properties like display: none applied. By default, this plugin does not load hidden, invisible images. If you need it to load invisible images, set skip_invisible to false.
$("img.lazy").lazyload({ skip_invisible : false });