-2

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?

6
  • The images are definitely there?
    – Lee Taylor
    Commented Nov 4, 2012 at 18:23
  • @LeeTaylor: Yes, always, definitely, I can put my life on this. Commented Nov 4, 2012 at 18:27
  • I'd suggest running your code with the developer console running. You'll then be able to see the error code for the particular image that failed to load.
    – Lee Taylor
    Commented Nov 4, 2012 at 18:32
  • @LeeTaylor: It happens very rarely and for the same images that loads most of the other times. Commented Nov 4, 2012 at 18:34
  • If you link to a stored image like <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 the type of content adding to the link data-fancybox-type="image"
    – JFK
    Commented Nov 4, 2012 at 19:56

8 Answers 8

6
+25

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.

2

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 == 
2

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
}
4
  • 1
    it 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.
    – Roman
    Commented 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.
    – Smita
    Commented 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.
    – Roman
    Commented 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.
    – Roman
    Commented Nov 13, 2012 at 13:21
2

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.

1

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!

1

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.

1

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!

1

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
 }));
});

For Ajax-Calls see the JQuery-Doc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.