B-Lazy doesn't fire sometimes when page has been visited

[lukedanielson]

Not sure what it happening, but in Chrome (35.0.1916.114) on a Mac OSX (10.9.2), visiting my site that I've already visited, and possibly cached, none of the b-lazy elements change, nor do the success or error events fire.

If I press refresh, everything runs normally. If I go up to the location bar and press enter it will load fine too. Just sometimes when opening a new tab and typing in the url and hitting enter.

Wondering if anyone else is experiencing this, and/or it is a b-lazy issue, or something else.

FYI, here is my call to b-lazy:

var bLazy = new Blazy({ 
    selector: '.b-lazy',
    offset: 180, // Loads images 180px before they're visible
    success: function(ele){
        // Image has loaded
        // Do your business here
        console.log('img loaded');
    },
    error: function(ele, msg){
        console.log('b-lazy error:' + msg);
        console.log(ele);
        if(msg === 'missing'){
            // Data-src is missing

        }
        else if(msg === 'invalid'){
            // Data-src is invalid
        }
    }
});

Here is where I'm experiencing the issue: http://staging.aspirebeverages.com (even clicking on this link for me is a case when it sometimes does not fire)

Any ideas? Thanks in advance!

[lukedanielson]

Definitely seems to happen most when it opens the visited/cached page in a new tab. Loads everything but b-lazy doesn't fire.

Is it the way I'm loading b-lazy?

Can't figure it out...

[dinbror]

Hey Luke.

Your page is password protected! Can you reproduce when you test with my demo page (http://dinbror.dk/blazy/)? I can't reproduce!
Tested in chrome (35.0.1916.114 & 37.0.2029.0 canary) on a mac osx 10.9.3

[lukedanielson]

Hey there, sorry, we pushed up to production already...so i've hidden the staging server.

Email me at luke.a.danielson@gmail.com, and I'll send you a login.

I think it (either my server setup, or b-lazy) is caching the original src image, as it doesn't fire sometimes after opening the home page, either through a new tab or physically typing it. It works every time I press refresh though.

What I did to solve (or a temporary workaround possibly), is to just have src be a blank string src="". Doing this seems to make b-lazy fire every single time.

Thank you for helping out, great plugin!

[lukedanielson]

Well, it looks like b-lazy is not firing sometimes in Safari mobile. Tested on three different iPhones, some images just don't load.

http://aspirebeverages.com

Initializing same as code block above. Img markup like this:

<img class="main-media-img b-lazy" data-src="http://wpuld.aspirebeverages.com/2014/05/esprit-de-she-tempe-640x415.jpg" alt="WE HAD A GREAT TIME IN TEMPE!">

Are you able to reproduce the problem on a phone?

FYI, The iOS simulator IS able reproduce the problem... certain images just don't fire, yet inspecting it through Safari web inspector through the iOS sim doesn't log any errors in the console.

Is there something I'm doing incorrectly?

[Volker-E]

You have to put a src attribute into your <img /> tag. It's obligatory.

[lukedanielson]

Yes, I understand, but when I set a src on the images, then b-lazy often times doesn't fire ON ALL images set to the selector class, per the initial opening of the issue....thus it just stays as the placeholder img:

http://aspirebeverages.com/wp-content/themes/asptheme/assets/source/img/transparent_pixel_1x1.gif

Question is, is it a caching issue, via the server or the plugin, or is it something else I'm not seeing?

[rmunch]

One thing I noticed is that Blazy misses some images that come into the viewport after other images load. The issue seems to be that as images load, the page reflows and pushes some placeholders into the viewport. Since this doesn't trigger an event that Blazy handles, these images get missed.

If you know the dimensions of images before they load, you can avoid the issue by setting the dimensions on the placeholders. If you don't have that information (as in my case), my workaround was to call revalidate() each time a lazy-loaded image loads:

var lazyloader = new Blazy({
    selector: '.lazy',
    success: function () {
        lazyloader.revalidate();
    }
});

[lukedanielson]

The workaround ZMan proposes just produces a number of blazy missing errors for me.

Does blazy work when only some of the images on a page are using it, and thus some reflows may happen outside of b-lazy's purview?

In the iOS simulator, and on actual iPhones, some images set to be loaded through bLazy, don't fire at all when scrolled into view: http://aspirebeverages.com.

[dinbror]

@ZMan9854 :
I always recommend to avoid page reflows. If you don't know the dimensions but the ratio you could do the padding-bottom trick, http://dinbror.dk/blog/blazy/#Responsive.

@lukedanielson :

• Can't reproduce the caching issue you first mentioned on your site. Do you still have it?
• Regarding the mobile issue. Just quickly tested your site on an iphone. And when I look at the DOM, it looks like the images who doesn't load don't exist in the DOM anymore.
  For example "div" with data-postid="1769" doesn't have a child div called <div class="brick-media brick-media-ratio_6a"> as I would expect. Are you removing or manipulating the post items on mobile or touch devices?

[lukedanielson]

Hey @dinbror, thanks for taking a look!

Yes, since it was a live/production site, we decided that since we couldn't fix the issue of some b-lazy images not being replaced by the placeholder, that we would remove b-lazy in mobile environments, and remove some images from certain blocks (to speed up load time).

Apologies that the environment I've shown to you keeps changing. But one area that will not change that still produces the original problem is this page: http://aspirebeverages.com/a-team/

Both me, other users and the client experience the issue of images, specifically the first two images, left and right in the main content area, will not load sometimes. I've tried to figure out why, but nothing has lead me down a path to a solution. Most often it is opening a new tab and hitting enter, in Chrome, which originally lead me to believe it was some sort of caching issue, and since I'm not running any server-side cache, it makes me think it is client-side.

I know it's a hard use case to reproduce, but it is certainly happening. Whether it is due to something inside or outside of b-lazy itself is another story ; )

Any further insight? Again, thanks for the help!

[dinbror]

Any news?

I can see that you have some resize issues on the a-team site. If you start in the small view and resize up it won't load some of the images because they're hidden in the small view why bLazy will skip them. When you resize up and want bLazy to lazy load images not hidden anymore you need to call the revalidate method.

[davidthamm]

I also have the same problem as op in chrome on my website... slyturtle.tk/wallpapers
using the latest version of blazy

[philipgiuliani]

Same problem here. I did a temporary fix by initializing it like this:

blazy = new Blazy();
setTimeout(blazy.revalidate, 100);

[dinbror]

Please try the new version, 1.3.0. It should fix it.

[philipgiuliani]

Already done and yes seems to work :)

dinbror notifications@github.com schrieb am Fr., 23. Jan. 2015 12:57:

Please try the new version, 1.3.0. It should fix it.

—
Reply to this email directly or view it on GitHub
#24 (comment).

[thomasdebruin]

Experiencing this problem on the 1.3.1 version, using the revalidate temp fix for now, so maybe this issue needs to be reopened?

[dinbror]

Hey Thomas.

Can you elaborate a bit? How do you reproduce it? Do you have a live example?

[thomasdebruin]

I will try to extract a example from the project I'm working on (still in development) and put this online next week.

[landykos]

I also still have the same issue on the 1.3.1 version. It happens on Chrome on PC when you refresh a page either with F5 or with the browser button for refresh. It won't replace the images that are in the viewport. All other images that are not in view work as expected.

I added the revalidate temp fix and now it is working for me too.
setTimeout(blazy.revalidate, 100);

[thomasdebruin]

In my case: the first couple of images in the dom load, but not all of the visible ones, as soon as I scroll they all load.

[dinbror]

@landykos: do you have a live example?
I expect that you either initialize blazy before dom is ready or a lot of repainting is done

[landykos]

@dinbror currently only on local dev right now. I'll make sure and circle back once I have something up and running public facing.
Thanks!

[thomasdebruin]

In my case it had nothing to do with blazy but the combination with the packery layout plugin. I changed my code to trigger blazy after the layout algoritm is finished, that's moment to decide which images are within the viewport (and need to be loaded). This fixed my issue.

[tarik916]

I had the same problem in Safari due to the load cache it uses when entering the URL or using the back button. Adding this jQuery on page load fixed it.

$(window).bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
window.location.reload()
}
});

This was while using v1.4.0.

[michalzubkowicz]

This issue still exists on v1.8.0. When I press back button in newest Chrome on Galaxy S6 lazy load doesn't work until I scroll a bit.

[adkanojia]

Yep,
I'm using version 1.8.2 and same problem is still there.
Only loads images for first time and doesn't work on cached pages.

[dinbror]

hey @akashdeepkanojia.

Do you also see the issue on my examples page (http://dinbror.dk/blazy/examples/)?
What browser and device do you see the issue on?

[adkanojia]

I'm using OS X El Capitan
Chrome Version 56.0.2924.87 (64-bit)

Your example is working just fine.

This is my code:

var bLazy = new Blazy({
    selector: '.container img',
    success: function(element){
        var parent = element.parentNode;
        parent.className = parent.className.replace(/\bloading\b/,'');
    },
    error: function(err){
        console.log('Error loading image.');
        console.log(err);
    }
});

If I add the following code at the end then my example works fine too:
setTimeout(bLazy.revalidate, 100);

What could be the issue?

[kaa4ever]

Same issue here as @adkanojia. I'm on macOS Sierra, Safari 11.0.

Examples also working fine, but the "fix" setTimeout(bLazy.revalidate, 100); is not working.

[mxhCodes]

I'm using this library in combination with the Drupal integration (drupal.org/project/blazy) and can confirm this problem. Once I use minification of JS assets, this problem occurs. Without minification, it does not occur. I guess it's some sort of a timing problem.

Edit: Most probably related:
#125
I'm going to continue commenting there.

[alouane]

I have the same issue with blazy, even sometimes setimeout for less than 500ms doesn't work, it turns out it's a body loading issue, so I added this line on the body element: <body onload="new Blazy();">, and it worked perfectly