Home > Article > Web Front-end > Lazy loading of images and usage examples of jquery.lazyload.js

Lazy loading of images and usage examples of jquery.lazyload.js

零下一度Original: 2017-06-26 10:35:281200browse

Sometimes lazy loading of images is used in projects, so what are the benefits of lazy loading?

I think it mainly includes two points. The first is that delaying the loading of images in long pages that contain many large images can speed up page loading; the second is to help reduce the load on the server.

The following introduces the commonly used lazy loading plug-in jquery.lazyload.js and how to implement a lazy loading plug-in.

1: jquery.lazyload.js plug-in

lazyload is a lazy loading plug-in written by jQuery. Images outside the visible area of the browser will not be loaded until the user scrolls the page to Where they are. This is the exact opposite of how image preloading is handled.

Implementation Principle

Firstly, the selected img element is bound to an appear event (processing the img to display the real image address), so that the event can be triggered when the conditions are met in the future;

There is a container attribute configuration in the configuration object. The default is window. If the img element is in the container container viewport, the appear event is triggered;

In order to determine whether the img element is in the container container viewport range, there is The following four methods:

$.belowthefold = function(element, settings) {};    // 在视口下方$.rightoffold = function(element, settings) {};        // 在视口右方$.abovethetop = function(element, settings) {};        // 在视口上方$.leftofbegin = function(element, settings) {};        // 在视口左方

Specific use

1. Page introduction method

Since lazyload relies on jquery, all pages need to be introduced jquery, as follows:

<script src="jquery.js?1.1.11"></script><script src="jquery.lazyload.js?1.1.11"></script>

Basic writing method:

<img class="lazy" data-original="img/example.jpg" width="640" height="480">$(function() {
    $("img.lazy").lazyload();
});

The data-original attribute stores the real image url path.

Tips: You must set the width or height of the image in css, otherwise the plugin may not work properly.

Set Threshold

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 the threshold to 200 so that the image is 200 from the screen. Pixels are loaded ahead of time.

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

Set events to trigger 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 location of the image on the window. To prevent the image from loading until the gray placeholder image is clicked, you can do this:

$("img.lazy").lazyload({
    event : "click"});

Of course, You can also use the following method to implement lazy loading:

$(function() {
    $("img.lazy").lazyload({
        event : "sporty"});
});

$(window).bind("load", function() {var timeout = setTimeout(function() {
        $("img.lazy").trigger("sporty")
    }, 5000);
});

That is, 5 seconds after the page is loaded, perform lazy loading of the image.

Lazy loading effect

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. Below The code uses FadeIn Effect:

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

How to use browsers that do not support JavaScript

JavaScript is activated in almost all browsers. However, you may still want to Able to display real images on clients that do not support JavaScript. For graceful degradation when the browser does not support JavaScript, you can write real image fragments in the