Lazysizes: Images not appearing; only appearing on resize in IE

[petulla]

hi

I'm injecting code into a page and having some issues with images appearing.

The images do not appear after injection and on enter the viewport. If the browser is resized, the images are loaded successfully.

And yeah picturefill is in.

Is there an initialization function for the page that can be tried to prevent load the images automatically?

[petulla]

I ended up listing the srcset explicitly, which caused initial load to work for IE.

I used init() to trigger loading.

Any other thoughts are appreciated.

[aFarkas]

This sounds very strange. Can you post/mail me a link?

[fabianmichael]

I had a similar issue in IE and solved it by settings the CSS property height: auto via JavaScript after load. This seems to work, because it seems to trigger re-rendering/reflow of the image element, as window resizing does. There might also be a lot of other CSS properties that work, too.

[aFarkas]

@fabianmichael

This basically means: lazysizes works just right and there is "only" a reflow problem in the browser. If this is right any property change that does layout should work:

.lazyloaded {
    display: block;
    margin: 10px;
}

[petulla]

o_O

I'm not sure how it can be said it's working as hoped. That it requires a reflow is an issue.

[aFarkas]

@petulla

This reflow bug is a browser bug, which is normally caused by a combination of markup and in most cases by CSS. If you can fix this by changing layout, than this is a good workaround to fix this specific IE issue.

The only thing I could do is to always force layout after image load, but this is bad for performance and would hurt all websites, where this bug is not happening.

I'm always interested in such bugs and if you would provide a link with this issue, I could try to find the most cleanest solution.

But you can't expect that I fix this bug, without being able to reproduce it.

[petulla]

I will send a link this week when it's live.

[petulla]

I ended up using the picture element in my implementation to solve this.

[alexcracea]

I'm having the same issue and I came here even without using imagesLoaded. This is an IE issue that doesn't render images well if inserted through JS.
@petulla In my case I'm using Drupal with Picture module and doesn't solve anything

[matthewfbenjamin]

Has anyone gotten anywhere with this? I'm not using the module but came across the issue in my googling

[alexcracea]

@electroheadfx , @mbenjamin618
I can suggest the fix that helped in my particular case - calling window.picturefill() after a JS request happens seems to help.