Image lazy loading with JQuery

Reasons for lazy loading:

For scenes with too many pictures, in order to improve the loading speed of the page, reduce the load of the server, and enhance the user experience, we do not load the pictures that have not yet appeared in the field of vision, and then load them when the elements appear in our field of vision.

Lazy loading principle:

First, we set the src link in the img tag to the same picture (blank picture), and put the real picture link in the custom attribute, such as (data src). When js listens to the picture element entering the visual window, it stores the address in the custom attribute in src to achieve the effect of lazy loading.

The principle of image lazy loading implemented by jQuery. Its basic idea is: when outputting HTML, do not directly output < img SRC = "XXX" >, but output the following img Tags:

<img src="loading.gif" data-src="http://Real picture address / xxx. JPG ">
Therefore, the image displayed on the page is a gif Load the animation. When the page scrolls, use the jQuery hold<img>Of src Property is replaced with data-src The browser will load in real time.
JavaScript The code is as follows:
// Be careful: Need to introduce jQuery
$(function() {
    // Obtain window Quotation:
    var $window = $(window);
    // Get include data-src Attribute img,And take jQuery Object into array:
    var lazyImgs = $.map($('img[data-src]').get(), function (i) {
        return $(i);
    // Define event functions:
    var onScroll = function() {
        // Get the height of page scrolling:  scrollTop()Gets the offset of the matching element from the top of the scroll bar.
        var wtop = $window.scrollTop();//The height of the page scrolling is the distance between the top of the window and the top of the document, that is, the distance of the scroll bar scrolling
        // Determine whether there are any unloaded img:
        if (lazyImgs.length > 0) {
            // Get height of visual area:
            var wheight = $window.height();
            // Store index to be deleted:
            var loadedIndex = [];
            // Loop through each of the arrays img element:
            $.each(lazyImgs, function ($i, index) {
                // Judge whether it is within the visual range:
                if ($i.offset().top - wtop < wheight) {  //$.offset().top Gets the distance between the matching element and the top of the text document.
                    // Set up src attribute:
                    $i.attr('src', $i.attr('data-src'));
                    // Add to array to be deleted:
                    loadedIndex.unshift(index);//Sorting from large to small to ensure the smooth deletion of the lower edge
            // Delete processed objects:
            $.each(loadedIndex, function (index) {
                lazyImgs.splice(index, 1);
    // Binding events:
    // Manual trigger once:



The onScroll() function is last triggered manually because the scroll event is not triggered when the page is displayed. If the pictures are already in the visible area, they are still in the loading state. You need to trigger them once manually to display them normally.
Turn from Liao Xuefeng's article

Tags: Javascript Attribute JQuery

Posted on Mon, 06 Jan 2020 18:46:55 -0800 by mmarif4u