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.