jQuery lazy loading image plug-in Lazy Load usage guide_jquery

Lazy Load is a jQuery plug-in written in JavaScript. It can delay loading of images in long pages. Images outside the browser's visible area will not be loaded until the user scrolls the page to where they are. This is exactly the opposite of how image preloading is handled.

Lazy loading of images on long pages that contain many large images can speed up page loading. The browser will enter the ready state after loading visible images. In some cases, it can also help reduce server load.

How to use?

Lazy Load depends on jQuery. Please add the following code to the head area of ​​the page:

Copy code The code is as follows:

You must modify the HTML code. Set the booth symbol image in the src attribute. The demo page uses a 1×1 pixel gray GIF image. And you need to set the URL of the real image to the data-original attribute. Here you can define a specific class to Get the image object that needs to be loaded lazily. In this way you can simply control the plug-in binding.

Copy code The code is as follows:

The code for processing images is as follows.

Copy code The code is as follows:

$("img.lazy").lazyload();

This will cause all images with class lazy to be loaded lazily. You can refer to the basic options demo

Set sensitivity

JavaScript is enabled in almost all browsers. However, you may still want to display real images on clients that do not support JavaScript. To degrade gracefully when the browser does not support JavaScript, you can write real image fragments

Copy code The code is as follows:

Placeholders can be hidden via CSS.

Copy code The code is as follows:

.lazy {
display: none;
}

In browsers that support JavaScript, you must display the placeholder when the DOM is ready, which can be done at the same time as the plugin is initialized.

Copy code The code is as follows:

$("img.lazy").show().lazyload();

These are optional, but should be done if you want your plugin to downgrade smoothly.

By default, the image will be loaded when it appears on the screen. If you want to load the image in advance, you can set the threshold option. Set threshold to 200 to make the image load in advance when it is 200 pixels away from the screen.

Copy code The code is as follows:

$("img.lazy").lazyload({ threshold : 200 });

Placeholder image

You can also set a placeholder image and define events to trigger the loading action. At this time, you need to set a URL address for the placeholder image. Transparent, gray and white 1×1 pixel images are already included in the plugin Inside.

Event triggered loading

The event can be any jQuery event, such as: click and mouseover. You can also use custom events, such as: sporty and foobar. By default, it is in a waiting state until the user scrolls to the position of the picture on the window. In gray To prevent the placeholder image from loading until it is clicked, you can do this:

Copy code The code is as follows:

$("img").lazyload({
Placeholder: "img/grey.gif",
Event: "click"
});

Use special effects

When the image is fully loaded, the plug-in uses the show() method by default to display the image. In fact, you can use any special effects you want to process. The following code uses the FadeIn effect. This is the effect demonstration page.

Copy code The code is as follows:

$("img.lazy").lazyload({
Effect: "fadeIn"
});

The picture is inside the container

You can use the plug-in on images in scrollable containers, such as DIV elements with scroll bars. All you have to do is define the container as a jQuery object and pass it as a parameter to the initialization method. This is a horizontal scrolling demo page and vertical scrolling demo page.

Copy code The code is as follows:

#container {
Height: 600px;
Overflow: scroll;
}
$("img.lazy").lazyload({    
container: $("#container")
});

When the pictures are not arranged in order

When scrolling the page, Lazy Load will loop through the loaded images. In the loop, it will detect whether the image is within the visible area. By default, the loop will stop when the first image that is not in the visible area is found. The image is considered Fluidly distributed, the order of the images in the page is the same as the order in the HTML code. But in some layouts, this assumption is not true. However, you can control the loading behavior through the failurelimit option.

Copy code The code is as follows:

$("img.lazy").lazyload({
Failure_limit : 10
});

Set the failurelimit to 10 so that the plug-in will stop searching after finding 10 images that are not in the visible area. If you have a cumbersome layout, please set this parameter higher.

Lazy loading of images

An incomplete function of the Lazy Load plug-in, but it can also be used to implement lazy loading of images. The following code implements loading after the page is loaded. 5 seconds after the page is loaded, the images in the specified area will Load automatically. This is the lazy loading demo page.

Copy code The code is as follows:

$(function() {                                                  $("img:below-the-fold").lazyload({
        event: "sporty"
}); }); $(window).bind("load", function() {
var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000); });

Loading hidden images

There may be many hidden pictures buried on your page. For example, if the plug-in is used to filter the list, you can continuously modify the display status of each item in the list. In order to improve performance, Lazy Load ignores hidden pictures by default. If you want to load hidden images, please set skip_invisible to false

Copy code The code is as follows:

$("img.lazy").lazyload({
Skip_invisible : false
});

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

잠시 시간을 내어 기사를 친구들과 공유하거나 댓글을 남겨주세요. 여러분의 지원에 진심으로 감사드립니다!