How to activate Lazy Load for images with ItalyStrap

Go to ItalyStrap > settings and click on “Media” tab then check the LazyLoad check box and let the magic begin 😛

Image of lazyload checkbox

How do I change the image placeholder in Lazy Load functionality

You can add an URL of an image in the text input.

Use a small image for this purpose.

how-to-change-placeholder-image-lazy-load-wordpress

Otherwise you can add some code and filter the src of the functionality like the below example:

add_filter( 'ItalyStrapLazyload_placeholder_image', 'my_custom_lazyload_placeholder_image' );
function my_custom_lazyload_placeholder_image( $image ) {
    return 'http://url/to/image';
}

How do I lazy load other images in my theme outside the content?

You can use the ItalyStrap\Core\get_apply_lazyload helper function with the content yo uwant to lazy load:

if ( function_exists( 'ItalyStrap\Core\get_apply_lazyload' ) ) {
    $content = ItalyStrap\Core\get_apply_lazyload( $content );
}

Or, you can add an attribute called “data-src” with the source of the image URL and set the actual image URL to a transparent 1×1 pixel.

Example:

<img data-src="src/to/my/transparent/1x1/file"/>

You can also use ItalyStrap\Core\apply_lazyload helper function for printing content:

if ( function_exists( 'ItalyStrap\Core\apply_lazyload' ) ) {
    ItalyStrap\Core\apply_lazyload( $content );
}

Otherwise you can use output buffering, though this isn’t recommended:

if ( function_exists( 'italystrap_get_apply_lazyload' ) ) {
    ob_start( 'italystrap_get_apply_lazyload' );
}

This will lazy load all your images.

This plugin is using JavaScript. What about visitors without JS?

No worries. They get the original element in a noscript element. No Lazy Loading for them, though.

I’m using a CDN. Will this plugin interfere?

Lazy loading works just fine. The images will still load from your CDN. If you have any problem please open a ticket 🙂

How can I verify that the plugin is working?

Check your HTML source or see the magic at work in Web Inspector, FireBug or similar.

I’m using my custom Bootstrap Carousel, why doesn’t the second image appear?

Put the code below in your file js and type your Bootstrap Carousell ID in place of “#YOURCAROUSELID”

var cHeight = 0;$("#YOURCAROUSELID").on("slide.bs.carousel", function(){var $nextImage = $(".active.item", this).next(".item").find("img");var src = $nextImage.data("src");if (typeof src !== "undefined" && src !== ""){$nextImage.attr("src", src);$nextImage.data("src", "");}});

I’m using an external carousel, will Lazy Load work with it?

I tried only with ItalyStrap Bootstrap Carousel, please send me a feedback if have any issue with other carousel, however I can’t guarantee to solve the issue.

Last edit:

Comments are closed.