Limit The jQuery Lazy Load Plugin to Operate Only In The Content Area

If you have noticed, one of the way that highly-trafficked site save bandwidths is to use a lazy load plugin. What this lazy load plugin does is to load the images only when they become visible on the screen. Any images below the visible screen will not be displayed. This is also known as on-demand loading.

In WordPress, there are several lazy load plugins that you can use. One of my favorite is the jQuery Image Lazy Load plugin, simply because it just works the moment you activate it. No configuration is required.

There is one problem though. The plugin grab all the images in the page (including the site logo and all sidebar images) and load them in demand. This can lead to some unglamorous moments where the site loads without a logo or the sidebar showing incomplete widgets. The best way to workaround this is to limit the plugin to lazy load the images in the content area.

In the jquery-image-lazy-loading folder, open the "jq_img_lazy_load.php" file with a text-editor. Scroll down to line 27 and replace the line:

[php firstline="27"]jQuery("img").lazyload({[/php]

to

[php firstline="27"]jQuery("#content").find("img").lazyload({[/php]

where #content is the ID of your content area div. This will limit the lazy load plugin to operate only in the content area. Similarly, you can change the #content to other region of the site. To add multiple regions, use the syntax:

[php firstline="27"]jQuery("#content,#sidebar,#footer").find("img").lazyload({[/php]

That's it.

Reference: JEFF MALTERRE

Image credit: Howdy, I'm H. Michael Karshis