I use fancybox and very rarely some images don't load to the user. How can I ensure that images load all the time and if they don't, I could reload page or something?
8 Answers
You should first find out why these images are not loading. Use developer tools like FireBug for FireFox or built-in tools for others to monitor the network activity. The status column should indicate if there is a server-side related problem.
You can save an image's pixel data at x=1 y=1
into a variable, then make sure that it matches, and if it doesn't reload it. This would only work if the user has html5 canvas support. In my opinion, it's sort of an unnecessary workload to make every user's browser run though.
This will give you the info you need:
var colorOfSomeImage = colorvalue
var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
imageExists = pixel ==
with javascript
you can can do something like below to check if image loaded completely or not:
objImg = new Image();
objImg.src = 'photo.gif';
objImg.onload = function() {
/// do some work;
}
if(!objImg.complete)
{
/// do other work;
}
You can also use image onerror
event something like:
<img src="image.gif" onerror="handleError(this);">
function handleError(image){
//do some thing else
}
-
1it is important to declare img.onload first, and only then img.src. I had this problem few days ago and it took hours to find the source of problem.– RomanCommented Nov 13, 2012 at 12:23
-
nops, I don't think so, you can keep it anywhere before or after. I always keep first img.src and then
onload
and other events.– SmitaCommented Nov 13, 2012 at 13:00 -
I also didn't think so until today. I promise you'll get problems at least in IE7-8.– RomanCommented Nov 13, 2012 at 13:17
-
in IE7-8 .onload which is after .src will never fire if image is already in browser's cache. If will fire only after pressing F5.– RomanCommented Nov 13, 2012 at 13:21
You could set the error template of fancybox:
$('.fancybox').fancybox({
tpl: {error: '<script>window.location = window.location;</script>'}
});
This way if an image failed to load, the error template reloads the page.
This is somewhat tricky. You can use javascript fot the task. Build a function say loadImage:
$.fn.loadImage = function(fn){
this.load(fn);
this.each( function() {
if ( this.complete && this.naturalWidth !== 0 ) {
$(this).trigger('load');
}
});
}
The above code also covers cases where the image has finished loading before the script is executed. This can happen when you define the image in the markup.
<img src='http://example.com/img.png'/>
Trigger the following javascript whenever you want to open the fancybox
$('img').loadImage(function(){
//open fancybox
});
Good luck with whatever you're doing!
As Janis has pointed out, use your developer tool to monitor the Net section - it could be a server side issue.
Also a problem I had previously involved a fancybox binded multiple times - this would cause intermittent issues with it.
Monitor network request with Fiddler / FireFug or built in tools with Chrome(press F12 and click Network then reload page and monitor), whether the request to the image url is correct and they getting loaded. I mean getting 200 OK status or 304 Not Modified(Cache)
If you are running with some path issue, try use absolute path like 'http://yoursite.com/images/img.jpg' and check
Make sure you have all the images present at your server and no image request blocked by proxy server.
Hope this would help!
You could add the .error()
-Funktion to all images using a class. And then make an Ajax-Call back to the server to retrieve a missing source.
Something like this:
<img src="image.gif" class="imageClass">
And then:
$.each($(".imageClass"), function(index, obj){
$(obj).error(function() {
//Your Ajax-Call
}));
});
<a class="fancybox" href="image.jpg"...
, there is not way they shouldn't show up, unless you are retrieving the image dynamically from a database where query timeouts may affect. In the last case, you may want to force thetype
of content adding to the linkdata-fancybox-type="image"