search

dinbror / blazy

Hey, be lazy! bLazy.JS is a lightweight pure JavaScript script for lazy loading and multi-serving images. It's working in all modern browsers including IE7+.
http://dinbror.dk/blazy
MIT License
2.63k stars 356 forks source link

Safari Issue - Images disappear when loading and all re-appear at once when finish loading. #132

Open jacobAtAnalytixBar opened 7 years ago

jacobAtAnalytixBar commented 7 years ago

Hi there!

I am seeing an issue only in Safari (not in Chrome or Firefox) where images initially show as loading spinner but then disappear (turn blank/white) and then all re-appear once the full set of images is done loading.

I am using the blazy module for Drupal 8 - using blazy 1.8.2. See this link to see the issue: http://dev-web2017.pantheonsite.io/node/133

If you scroll down when the page loads you will see a bunch of images show the spinner for a few seconds, but then all disappear for awhile. Once all images are loaded then they all pop up at once.

If you open Safari DEV tools > Resources > Scripts you will see blazy.min.js and blazy.load.min.js. I un-minified "blazy.load.min.js" so that you can read it in browser. It is used by the Drupal module to instantiate blazy with Options set in the admin console (Offset = 10000 since I want all images to load when the page displays). Also I added the "window.setTimeouts" into that file because I saw on another thread it might be workaround, but it didn't work for me.

Are there any workarounds for this? Can you take a look and let me know if this is a library issue or an implementation issue?

Best, Jack

dinbror commented 7 years ago

Hey @jacobAtAnalytixBar

Very strange. I don't think it has something to do with blazy itself. Have seen it before or can't reproduce it with just blazy.js. If you want to load all images after dom ready you could also use the public load function: http://dinbror.dk/blog/blazy/#Functions

jacobAtAnalytixBar commented 7 years ago

Hey many thanks for the quick reply! I will definitely try the public load function tonight and post back here. Can you try to reproduce using some similar loading function to the blazy.load.min.js that you can get from Resources in Web DEV tools from my site? Is there anything about that loading code that looks odd or stands out to you? Technically this is a part of the Drupal module I'm using but I can patch the code if you notice anything strange.

Thanks again for your help!

jacobAtAnalytixBar commented 7 years ago

I just tested out using the load() function but it didn't seem to change anything. I added this code into the blazy.load.min.js: me.init.load(document.getElementsByClassName("b-lazy"), true);

Take a look at the Resource in Web DEV tools at http://dev-web2017.pantheonsite.io/node/133 to see where I added it (I put it in 2 places right after Blazy() is instantiated.

Any suggestions?