-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
jQuery.imagesLoaded does not work with FireFox #191
Comments
Thanks for reporting this bug. I'm not able to reproduce this bug in Firefox v38. Sounds like a networking problem. Can you clarify that this problem only happens:
|
Did you try with "Network Link Conditioner" ? It only happens to me with that thing turned on. Stumbled on this because users reported the site not loading properly ( I'm using imagesLoaded to fade the site in ). |
It doesn't always freeze. To reproduce click "add images" about 3 times, then wait for half of them to load, then click twice again. If that doesn't work - clear cache and try again. It's a rather random error, but when many images are involved - it has a high risk of hanging in FireFox. |
Tested Safari 8 with same network settings - works. Pushed Chrome to the limit with 44% packet drop and 800ms DNS delay - it took about 10 minutes to load, but everything worked out fine. It's a FireFox Thing. Another hint of what might the issue be - when it's stuck - if I "add more images", the images that were stuck previously are "unstuck" and everything loads properly. Edit: |
beep beep |
Sorry, I won't be able to dig into this one. It's a deep edge case. I'll label this as help wanted. |
In my mind - 7% of browser market-share isn't a deep edge case, considering that Flickity, Masonry, Packery are all based on imagesLoaded. It's a critical instability issue at the moment. Even your demo site breaks on a FireFox and a poor internet connection. Yes, it's likely not an issue in California and Europe, but what about the developing world ? Does this mean that imagesLoaded shouldn't be used for "developing countries" that use FireFox ? I'd help, but I have no idea even where to begin. Any ideas on what might be wrong with FireFox ? |
I'm currently on Firefox 37.0.2 & I'm also experiencing the issue. I don't think the issue is isolated to only slow networks (although it does help reproduce the error) because I managed to reproduce the error consistently whilst having a download speed of 3.77 Mbps. I'm no expert so I took a rather thorough (and possibly quite difficult to read) approach to this issue. The details can be found below. I believe I have found a solution to this issue: var proxyImage = new Image(); to var proxyImage = this.img; where this.img is the actual Image element we are trying to track. I simply passed it into the Resource constructor when it was created in the LoadingImage.prototype.check method and modified the Resource constructor to store the variable. //modified constructor (this is in LoadingImage.prototype.check)
var resource = cache[ this.img.src ] || new Resource( this.img.src,this.img ); //modified constructor (Resource)
function Resource( src,img ) {
this.src = src;
this.img = img;
// add to cache
cache[ src ] = this;
} Limitations of this fix: This fixed the issue on firefox. I did not test extensively on other browsers, but chrome still worked fine. Details:
Observations:
Resource.prototype.check = function() {
// only trigger checking once
if ( this.isChecked ) {
return;
}
// simulate loading on detached element
var proxyImage = new Image();
eventie.bind( proxyImage, 'load', this );
eventie.bind( proxyImage, 'error', this );
proxyImage.src = this.src;
// set flag
this.isChecked = true;
};
var proxyImage = this.img;//this.img is the actual dom Image we are trying to track I tested this fix 5 times using 20 images from imgur and it worked 5/5 times (no caching), as opposed to the 1/5 times successful with creating a new Image(). |
jQuery.imagesLoaded does not work with FireFox
Hi, I have a trouble with imagesloaded js, when i try with ctrl + f5 the browser, the issue sometimes happens. I show the console in firebug and notice that one image is checked by false ( "check" event return false), and that image has 744.00KB and load time 7.15s. See Below: All images is loaded but why a image is check false, so the inner function can't run. |
Did you use the imagesloaded.pkgd.js which includes the commit pushed by dmoreno? It should fix the issue the imagesloaded.js file in this branch is not updated to reflect the fix though, so if you use that you may experience the same issue. |
@crazoter - I had the same issue with Firefox and your fix worked for me. Thanks! BTW - this issue is not limited to slow networks. Our images are hosted on s3/cloudfront and we're in NYC with high speed FIOS. Tom. |
@crazoter Thanks for looking deeper into this! This is tremendous work. I'll be incorporating your insights in the next refactor. |
@desandro you probably also want to try the following: Resource.prototype.check = function() {
// only trigger checking once
if ( this.isChecked ) {
return;
}
// simulate loading on detached element
this.proxyImage = new Image();
eventie.bind( this.proxyImage, 'load', this );
eventie.bind( this.proxyImage, 'error', this );
this.proxyImage.src = this.src;
// set flag
this.isChecked = true;
}; It could be that the proxyImage variable is getting garbage collected because it's defined locally. Assigning proxyImage as a class property will prevent this from happening ... Also: I wouldn't suggest using the actual dom element to check if the image is loaded because when the image is already loaded before the script is executed, it's going to look like the image never loads. |
We're also seeing this issue, and the proposed fix from @crazoter and @dmoreno seems to fix the problem. Can't say I understand why that patch fixes things, but seems to. Testing ongoing. Very interested in seeing this make it into a future release. We're relying on imagesLoaded to "reveal" parts of our website. |
👍 for this fix What can we do to get this in? |
@desandro I thought you quit twitter to work full-time on your plugins. This seems like a pretty critical issue, isn't it? It's in the core of many of your other libraries, I don't understand why is this issue ignored. |
🎉 imagesLoaded v3.2.0 integrates @crazoter's fix for Firefox 🎉 Try it out and report back if this issue has been resolved or not 🍊 |
I'm closing this issue as resolved. If you run into an issue with imagesLoaded or Firefox, please open a new issue. |
Note: I didn't just "quickly take a screenshot". I waited for about a minute or so (in the meantime I moved the "about windows" in view). The images are never loaded
Note 2: In the screenshot it looks like no images are loaded at all. That's not true either. I just moved the "about windows" on top of the loaded images accidentally.
On not that good networks ( that's what the network link conditioner is there for ) imagesLoaded just stops trying to load the images at all. No 'fail', no 'always', it just stops and does nothing.
I used this for the screenshot: http://codepen.io/desandro/pen/bIFyl
imagesLoaded vanilla version works just fine with firefox and problematic network. For some reason the jQuery version is what causes problems.
The text was updated successfully, but these errors were encountered: