Last Image in Document Fails to Load - "Failed to Load Resource"

I am having a problem with the initial page load of a site after refresh. I use Chrome for development but the proble开发者_C百科m is evident across all browsers.

I get the message "Waiting for mysite.com..." and the loading indicator keeps spinning. This stays like this for about 10 seconds and then Chrome gives up and tells me "Unable to load resource 'foobah.png'" from within the developer console. The image is definitely at the path stated. Sometimes it loads sometimes it doesn't. If I remove reference to this image altogether the error will fall on a different image within the page. This is a regular but intermittent fault.

My site is javascript heavy (2500+ lines) I suspect it could be something to do with either:

1. Javascript loading interfering with image loads.
2. Something funny going on regarding the caching of images.

Does anyone have any experience of this type of page load problem?

Appreciate any help you can give!

Example URL: http://dev.thebeer.co/imgs/UI/inboxIcon.png

Chrome Developer Tools Screens:

UPDATE:

This is an example screenshot from firebug. You can see that the request for the resource doesn't time out but takes ages to retrieve.

The file that fails can vary from CSS background-image to normal image to even a font file. I think this problem is deeper than client side. We have also been experiencing The Chrome "The following pages have become unresponsive. Your can wait for them to become responsive or kill them" error occasionally. We have stripped the page of ALL javascript, it's almost a bare shell! The image load problems continue to occur cross browser.

UPDATE:

I have found that the following errors in http error log seem to be linked with the problem. Anyone know what they mean and how to solve them?

[ Wed Feb 23 06:54:17 2011] [debug] proxy_util.c(1854): proxy: grabbed scoreboard slot 0 in child 5871 for worker proxy:reverse
[Wed Feb 23 06:54:17 2011] [debug] proxy_util.c(1967): proxy: initialized single connection worker 0 in child 5871 for (*)
[Wed Feb 23 06:54:24 2011] [debug] proxy_util.c(1854): proxy: grabbed scoreboard slot 0 in child 5872 for worker proxy:reverse
[Wed Feb 23 06:54:24 2011] [debug] proxy_util.c(1873): proxy: worker proxy:reverse already initialized
[Wed Feb 23 06:54:24 2011] [debug] proxy_util.c(1967): proxy: initialized single connection worker 0 in child 5872 for (*)
[Wed Feb 23 06:59:15 2011] [debug] proxy_util.c(1854): proxy: grabbed scoreboard slot 0 in child 5954 for worker proxy:reverse
[Wed Feb 23 06:59:15 2011] [debug] proxy_util.c(1873): proxy: worker proxy:reverse already initialized

---

Sounds like it is quite a heavy site (2500+ lines of js!). It is strange that you only experience it on Chrome but this may just be down to the way it handles requests.

As your static content is so heavy, I would recommend using a content delivery network (CDN). Spreading your content across a CDN (and geographical locations) allows a user to be served by the closest,and therefore fastest, server.

There are many CDN providers who will charge to host your content. I use Amazon S3 storage facility, and while not a true CDN, helps me spread my static content which does speed up my sites.

Also with Amazon S3, you can specify your geographical location of your storage area, whether it be US or Europe etc. This geographical location may be closer than your existing web server which is a bonus. S3 gives you free membership as well to test it out.

Hope this helps.

Chris.

---

If it were Chrome-specific, I'd say it might have something to do with this known bug, but since you mentioned it's happening in other browsers, are you getting the same errors from Firebug, Safari's web developer tool, and/or IE's developer tool?

Also, what's the total download time and amount of your page? I see in your images that there appear to be a large number of files, and some of the images are taking several seconds to load. Can any of those be optimized?

One way to help remedy the problem as a whole is to create sprites, or use non-image alternatives wherever possible (you can use a number of CSS3 techniques to replace things like gradients and whatnot), as well as using tools like SmushIt for images and a JS minifier and combiner to decrease your file sizes and server requests.

---

Finally I get someone with this problem with me:

chrome classic - "failed to load resources"

This problem drives developer crazy as it can happen locally, with small amount of requests and a tiny PNG -- however, if you open the image in a new tab, your image will be....finely loaded!

Important notice: chrome caching is the most tricky one I experienced - try to disable/bypass the caching of chrome by using the privacy mode or append a random string behind the resources

Important notice 2: sometime the network tab of web inspector will make a connection time out - that's why you see the "PENDING" state

Solutions/workarounds I tried:

1. upgrade your chrome to latest one (usually out of luck)
2. use image preload (sometimes it works)
3. use data-uri and put it in another .css file: http://css-tricks.com/data-uris/

By some formatting (css selector, css rule order and line breaking), with some trial and error, the image loaded again. (this one works magically)

I wonder if a specific bit of the origin image jammed the image renderer (as data-uri is not work at the beginning)...but this problem will appear when some CSS style applied for a PNG-backgrounded block - especially when "opacity" involved (or that PNG is a hidden background)

Summary:

1. compress your image in any method
2. change the CSS selector (e.g. apply the background in other element), if it still failed to load, then it is the image problem - try to change some bit of the origin image* or using data-uri (solution 3)
3. change the image loading order if (2) loaded your image - then it will be css selector/ordering problem

*You may not believe after I edited the image, the problem appear / disappear.

(If you experiencing long wait time for other images cross browser, it most likely is the performance issue but may be not the bug - some blocking occured)

---

So as random as this sounds... append a random-number querystring to the src when loading it. I had this problem back when I was working on a custom popover library for an old employer, and the sites it'd load on were... very resource intensive, let's say. This, for some reason, fixed it for me. YMMV?

img.src = 'x.gif?r=3192319231938123912';

---

You should consider compact your script files (minify, gzip, etc). With a differnt host for your images (images.yoursite.com) you will have a greater number of parallel connections.

You can use async javascript load - like Google suggests on Google Analytics docs: $(document).ready(function() {

 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

 ga.src = "xpto.js"

 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);

});

---

A couple of things to try. To correct the .woff problem add the proper mimetype to your server settings:

AddType application/vnd.ms-fontobject .eot AddType application/octet-stream .otf .ttf

Next, recreate that .png image that is not loading. Could be that someone saved an image as .jpg or gif but then renamed the file with a .png extension - thus confusing the browser. Try creating that image again and making sure it's saved as the correct format.