Comments (9)
Callback is a "Function that will be called when all images has finished with loading, regardless of their final state (proper/broken)."
That's it. When all images from $('#content-scene img')
has finished with loading (doesn't matter if they are properly loaded, or browser gave up and marked them as broken), your callback will be fired. That's the whole meaning of this plugin. There is no event delegation, as it would make no sense in the context/purpose of the plugin.
So to do what you want, you should do something like:
function fixBroken(broken) {
$(broken).on('error', function () {
fixBroken(this);
}).each(function(i, img) {
// update src logic here
});
}
$('#content-scene img').imagesLoaded(function($images, $proper, $broken) {
fixBroken($broken);
});
It's a recursive solution that will keep trying to reload broken images. The fact that this might not be a best thing to do is another issue...
from imagesloaded.
Thanks Darsain.
I'm curious to why you think, it might not be a good idea? I can see how multiple error event listeners could be attached in your example and that reloads should be limited to e.g. 1-2 reloads but other than that, your example looks good to me. I've tried to fix the cons mentioned above by doing this:
EDIT: solution is flawed - will only reload the images once
function fixBrokenImages($broken) {
$broken.one('error', function () { // <- notice the "one" method
if( $(this).data('r') < 3 ) { // only try twice
fixBrokenImages(this);
}
}).each(function(i, img) {
img.src += '?reload=' + (($(img).data('r') || 0)+1);
});
}
function positionImages($proper) {
// find and set the coordinates of loaded images
$proper.each(function(i, img){
$(img).css({
top: img.offsetTop,
left:img.offsetLeft
});
});
$proper.addClass('positioned');
}
$('#content-scene img').imagesLoaded(function($images, $proper, $broken) {
// reload broken images
fixBrokenImages($broken);
// position images
positionImages($images);
});
I've yet to see an image fail twice but I think my logic is correct. Does this address your mention concern?
from imagesloaded.
My concern was regarding you using such an unreliable host, and instead of trying to solve it, you are "fixing" it by making tons of new http requests. That's just bad on top of bad.
from imagesloaded.
Yes, your right. But for development it's ok. I'm doing this project as a favor to a friend, and in the end it will be her call, if she wants to buy a dedicated server to handle image resizing on the fly. IMHO will be a better solution. I could also cave in and implement it in PHP on her current server host but I rather not.
Anyhow, I need something that works now for development and at any rate this is an improvement to the script, even if it is symptom treatment.
Thank you so much for attending to my issue. It's rare that non bugs get any positive attention on github.
Cheers
from imagesloaded.
Wow, I just saw recurring reload failures for the first time and $broken.one('error'
seems to never fire (in Firefox 17.0.1). Any thoughts on that one?
from imagesloaded.
For the sake of history and perhaps helping someone else, here is what I ended up with using.
function fixBrokenImages($broken) {
var re = /\?reload=(\d)$/
$broken.one('error', function () {
if( this.src.match(re)[1] < 3 ) {
fixBrokenImages($(this));
}
}).each(function(i, img) {
var tries = img.src.match(re);
img.src = img.src.replace(re, '') + '?reload=' + (tries ? ++tries[1] : 1);
console.log("tries: %s \nsrc: %s", (tries ? tries[1] : 1), img.src);
});
}
$('#content-scene img').imagesLoaded(function($images, $proper, $broken) {
// reload broken images
fixBrokenImages($broken);
// position images
positionImages($images);
});
Note that jQuery.data()
seems to be confused about what element you attach data to, if a) it's an image and b) you change the src
.
from imagesloaded.
I'm having a similar issue where the browser (iPad) can take several minutes before reporting an image as broken, most likely because of conjested network. How can i force reject imageLoaded after a set timeout? I can't reject the promise object...
from imagesloaded.
Adding a timeout is on a to-do list. Along with other stuff... It'll need API re-factoring, as we will have to report 3rd array with pending images in callbacks.
from imagesloaded.
Sounds good! I have a fairly OK solution for now. Quite tied to my app, so I can't share it, but it's based apon dotnetCarpenter's solution.
from imagesloaded.
Related Issues (20)
- It doesn't work with <picture> tag? HOT 1
- Including the imagesloaded.js library causes <source srcset> images to load two versions of the image, increasing bandwidth by ~4x HOT 2
- .bind deprecated HOT 1
- V3 site page not found HOT 2
- desandro.com has expired HOT 1
- Not working with only srcset HOT 5
- MIT License Page HOT 1
- Timing a page loader only to visible images using imagesLoaded [SOLVED] :) HOT 1
- Thanks for your library! HOT 2
- wp + masonry + imagesloaded lazyload = gap between posts HOT 2
- Multiple file type download issue with imagesLoaded, Barba and Swiper
- Some issues -
- Imagesloaded v5 triggers loading of largest image when using srcset HOT 5
- Downloads jpeg image when using picture element in browser that supports modern formats
- obj is not iterable HOT 2
- Warning: noob incoming HOT 1
- Run each function after each image is loaded instead of waiting for every image to load and run all functions at once HOT 2
- Public site is broken HOT 1
- Possible bug with makeArray helper function in 5.0.0 HOT 2
- Is there a way to check if at least one image is loaded?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from imagesloaded.