Internet Explorer 11 not loading any images

[Uriel1339]

Issue Overview

When using old browsers images are not loading. Not sure if related to JavaScript or not. It was tested with Internet Explorer 11, simply no image loaded whatsoever. Everything else of the content loaded without an issue.

This is an issue because we are an e-commerce site and a lot of our customers are 40+ years old that still use internet explorer.

Steps to Reproduce (for bugs)

Use Internet Explorer 11 Visit https://www.jnequipment.com/shop/brands/graco/17m359-graco-ultra-handheld-airless-paint-sprayer-corded/ Tested with PHP 7.2.22

Works fine with Microsoft Edge & Chrome

Expected Behavior

Images should load.

Current Behavior

Images are not loading.

Possible Solution

Include a check for browser version.

[felixarntz]

Thanks for the report! There shouldn't be an issue with Internet Explorer per-se, the JavaScript fallback is supposed to work there, so I'm curious to find out what's happening here. When loading the page with Internet Explorer 11, do you see any errors in your browser console (right-click anywhere > Inspect > Console)?

[LukaszJaro]

I have a similar issue in IE11: Example: I navigate to a page, there should be an image present above the fold(in my field of view), but it's just a blank space where the image should be. I scroll once and then the image finally appears.

I checked console for errors, only have some warnings which I don't think are relevant:

DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337

I checked the rendered HTML of the blank img:

<img class="wp-image-205 lazy" alt="" src="https://myurl/wp-content/plugins/native-lazyload/assets/images/placeholder.svg" data-src="https://myurl/wp-content/uploads/Screen1_File-a.png" data-sizes="(max-width: 358px) 100vw, 358px" data-srcset="https://myurl/wp-content/uploads/Screen1_File-a.png 358w, https://myurl/wp-content/uploads/Screen1_File-a300x186.png 300w" loading="lazy">

I also checked the wp-rig implementation of lazy-load, and the same issue occurs.

I recently updated to WP 5.2.3, could this be an issue with gutenberg? I also just updated to PHP 7.3.9.

The other issue I am having is in chrome, it doesn't look like images are lazy loaded at all, but I have to investigate this further as well.

[Uriel1339]

I experience the same as lukasz except no errors or warnings. But the HTML info looks the same.

Running php 7.2.22 and WordPress 5.2.3

[LukaszJaro]

@Uriel1339 I went to your site, and noticed you are in fact getting a script error:

SCRIPT16389: Unspecified error. lazyload.js (1,1430)

I also noticed in chrome all of your images are loading right away, there is no lazy load, unless I am missing something?

[Uriel1339]

@LukaszJaro

Might be because of Varnish and other Cache's related to our Pantheon installation. So I'm not 100% sure.

That being said, I double-checked my internet explorer and I see still 0 in the console in terms of warnings and errors, that is kind of odd.

I suppose more data and input would be useful. Feel free to check our partner sites too (top-right corner on the website), they are all running lazyload as well.

[LukaszJaro]

@Uriel1339

I disabled JavaScript in chrome and then the lazy load finally started to work..you can try this yourself and see it in action.

I did checkout your partner websites and they were error free, but your main website still shows a script error in IE11 .950.17134.0

[LukaszJaro]

@felixarntz, Any idea on why IE11 does not display images on first load, when they are in field of view? Simple as missing event listener 'DOMContentLoaded' ?

[felixarntz]

@LukaszJaro Sorry for the late reply, have been distracted with other things recently, but hopefully we can figure out what is the problem here.

Have you been able to resolve the problem in the meantime? Can you clarify what you're referring to in your last message related to DOMContentLoaded?

[LukaszJaro]

@felixarntz np, google has you busy :)

The issue is still present, I was referring to the wp-rig implementation of lazy load, I noticed they have the following event listeners: scroll, resize, orientationchange, and DOMContentLoaded.

Then I checked your fallback implementation: scroll, resize, orientationchange

Maybe the script is firing to fast for IE11? and the DOMContentLoaded listener can help?

I tried it on multiple other WordPress sites, and the images(which are in the viewport) don't load in IE11 until you start scrolling.

[felixarntz]

Fixed via #16.

@LukaszJaro I'll deploy a new release shortly, let me know if the issue is fixed for you with that one.

[LukaszJaro]

@felixarntz thanks!

Just tested, it's working as expected in IE11, no other regressions found so far, also thanks to @Soean !