Refresh lazy load when changing window size?

[goslingo]

Hello,

Is there an easy way of making Lazy Load refresh all images when the browser window reaches a certain size?

Currently (using the responsive images add-on) if you load the page with a narrow window it will load small images. Obviously if a user increases the browser width it would be great to load in higher res images.

Thanks, Oli

[ghost]

I'd be very interested to find this out too.

I was thinking maybe its possible to trigger initialization again on $( window ).resize() with checkDuplicates set to false, but I don't think that's enough to get it working reliably.

This is what I have so far:

$( document ).ready(function() {

    var resizeTimeout;

    $( window ).resize(function() {

        resizeTimeout = setTimeout(function () {
            $(window).lazyLoadXT({
                checkDuplicates: false
            });

            clearTimeout(resizeTimeout);
        }, 1000);

    });

});

This mostly does the job, but I'm seeing weird glitches with transparent PNGs (particularly on Chrome) showing a solid grey background colour instead of transparency and the blankImage (loading gif) is displayed forever.

[dryabov]

@ecjonathan Most likely grey background may be fixed by using CSS:

img.lazy-hidden[src] {
    background: transparent;
}

[ghost]

@dryabov thanks, I'll give that a try!