What is lazy loading. “Lazy loading” of content on the landing page

Lazy loading is a programmatic jQuery plugin, written in JavaScript, which defers loading images on (large) web pages. Thus, images that are not in the user's field of view will not be opened until the user scrolls down the page. Same thing as preloading, only in reverse.

Using “lazy loading” on sites containing many large images allows you to speed up page loading - the browser will report a full opening as soon as all visible images have opened. In some cases, using this module helps reduce the load on the server.

The program is written based on a module for loading images called YUI ImageLoader Utility, the author of the program is Matt Mlinak.

Scroll down the pages to view the effect.

It has not been possible to collect the source code yet. I'm working on it.

How does the program work?

The software plugin is based on jQuery (why?) and variables developed by Brandon Aaron, which are now included in jQuery markup. Indicate them in the title:

$("img").lazyload();

After this, all images will be loaded as the user accesses them.

Responsive Installation

The program has options for pedants who want to personally monitor every detail. You can set the image opening threshold - by default this value is 0, that is, the image opens only when it appears on the page.

$("img").lazyload(( threshold: 200 ));

If you set the threshold value to 200, then before opening 200 pixels of the image will already be loaded.

Image placeholder

You can also set a placeholder for the image and an event to start loading. The placeholder must contain the address of the image. The software module offers transparent, gray and white images of 1*1 pixel size.

$("img").lazyload(( placeholder: "img/grey.gif" ));

Event to start loading

The event is set in jQuery - it can be anything, including a click or mouse movement. You can develop your own options. By default, the program waits until the user scrolls down the page - then pictures appear in the browser window. To prevent images from loading until the user clicks on the placeholder, do this:

$("img").lazyload((
placeholder: "img/grey.gif",
event: "click"
});

Using Effects

By default, the plugin waits for the image to fully load and then calls the show() function to show it. You can add any effect you want to this sequence of actions. The code snippet below shows how to add a fade in effect. On the demo page you can see how it looks.

$("img").lazyload((
placeholder: "img/grey.gif",
effect: "fadeIn"
});

Internal image storage

You can also use the plugin for images stored inside scrollable containers - to do this, simply specify the container in the code as a jQuery object. There are demo options for horizontal and vertical containers.

#container ( height: 600px; overflow: scroll; ) $("img").lazyload(( placeholder: "img/grey.gif", container: $("#container")
});

If the images are displayed out of order

After scrolling the page, the program begins searching for unloaded images, checking during the search to see if the image has become visible. By default, the search stops when the first visible image is found - it is assumed that the order of the images on the page is the same as in the html code. However, with some markup options this is not quite the case - in this case you should use the failurelimit function, which regulates the order in which the pictures are displayed.

$("img").lazyload(( failurelimit: 10
});

If we set the function value to 10, the program stops searching after it finds 10 visible pictures. If the page has complex layout, you should enter a fairly large number here.

You can organize lazy loading of images, although this is not included in the main functionality of the program. If you add the code below, the program will wait for the page to fully load, not only its html elements, but also its images. Five seconds after the download is completed, invisible pictures will also be automatically downloaded. You can check out the demo version.

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

That's all for today! Thank you for your attention.

When browsing the Internet, everyone wants website pages to load as quickly as possible; no one likes to wait a long time for a particular page to load. Moreover, this wait can be delayed quite significantly in cases where there are a great many images on the page. The presence of images on a page makes the page more attractive to visitors, increases visibility and ultimately helps increase traffic to your site. However, we have to take into account the fact that the presence of images significantly makes pages heavier, increasing their loading time.

Slow page loading negatively affects the SEO optimization of your website. Nowadays, many websites use GIF or images in their posts. PNG format. These images are larger than JPEG images and as a result pages may take even longer to load. To download each such image, a separate HTTP request is required, which also does not speed up the download.

To solve this problem, so-called “lazy” or deferred loading is used, in which only those images that the user needs are loaded. This article describes the six best free WordPress lazy loading plugins that can significantly improve page loading speed.

1. a3 Lazy Load - the best lazy loading plugin

The plugin speeds up your blog and improves the page's visual responsiveness on PCs, tablets and mobile phones.

a3 Lazy Load does not create a load on the site and is mobile-friendly. An easy to use plugin that will speed up your website. The more heavy elements your site has, the better the plugin will do its job and the more performance improvements you will see.

Lazy loading for all images, gravatars, videos and frames
Selecting loading effects
WooCommerce support
High performance and low load
You can exclude images and videos
Backup JavaScript connection
Supports all browsers

2.Lazy Load

This is a lazy loading image plugin developed by WordPress.com, the TechCrunch team, and Jack Goldman. It has simple code, so it does not overload server resources.

Lazy is an easy to install and configure plugin. It requires virtually no setup, starting work immediately after installation.