Could be a "display:inline" property added by mistake?

[dertin]

Hi,

<a href="#" target="_blank" title="" class="image hidden-sm hidden-md hidden-lg" data-src="img.jpg"></a>

after loading the image the following html code is generated, but a css property "display: inline" is added.

<a href="#" target="_blank" title="" class="image hidden-sm hidden-md hidden-lg" style="background-image: url("img.jpg"); display: inline;></a>

[dkern]

Hello @dertin

I have never faced such kind of thing. I would not know why Lazy would add this. Maybe any other script has some side-effect?!

[dertin]

Hi @eisbehr-

I am using the nginx pagespeed module, I have not tried to deactivate it yet. The solution that I found for the moment was the following:

$('.image').lazy({
            afterLoad: function(element) {
               element.css("display", "");
            }
});

[reinder42]

I have the same issue. Lazy loaded img tags get a display: inline style added to them. It's not a big issue, b/c they're inline images anyway, but on mobile it's causing images that are initially hidden to show up. I solved this with the visibleOnly: true setting.

[dkern]

Well, yes. Hidden images will be shown by lazy. Lazy hides images before settings the image src. This is because to prevent flickering and make use of effects. So by default Lazy uses jQuery's show with a time of 0ms. But display inline is interesting here, i would expect display block there. But I think this is the key here ...

[reinder42]

From http://api.jquery.com/show/

The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css( "display", "block" ), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

Could that cause the display: inline behavior here? And taken from: https://stackoverflow.com/a/2402773

Note that browsers technically use display: inline (as seen in the developer tools) but they are giving special treatment to images. They still follow all traits of inline-block.

So it should behave just like display: inline-block, even though it's set to inline. When I inspect the element in DevTools on Chrome, it's set to inline although the calculated style is block. So, unless you absolutely need display: block, I think how it is right now is fine (it is for me). Otherwise, @dertin's workaround can help.

[hitech95]

I have the same odd display: inline-block problem. But looks like a problem from jQuery!