Loading GIF (Preloader) gets stuck only on Chrome

html css google-chrome gif preloader
amiregelz picture amiregelz · Aug 16, 2012 · Viewed 16k times · Source

I have a gallery in my website. The gallery contains 15 images, each one of them is approximately 500KB (total size is 7.5MB).

Because the gallery takes a while to load (25 seconds on my computer, tough it depends on the connection), I want the visitor to know the gallery is loading, hence the Ajax loading GIF.

I want the visitor to see the loading GIF as soon as he enters the gallery page, until the the gallery images have been downloaded and are ready to be viewed.

In order to achieve my goal, this is what I've done:

This is the beginning of the body of the gallery HTML page:

<body>
    <img src="images/ajax-loader.gif" alt="" class="hiddenPic" /> 
    <!-- loading Ajax loading GIF before all the other images -->

And this is the gallery CSS part:

#gallery {
  background: url(images/ajax-loader.gif);
  background-repeat:no-repeat;
  background-attachment: fixed;
  background-position: center;

So basically, the loading GIF should be downloaded as soon as a visitor enters the gallery page, because it is the first object inside the <body> that is going to be downloaded. However, it's not visible due to the hiddenPic class.

This method should help making the loading GIF ready and visible as the gallery background as soon as possible, until all the gallery images have been downloaded and the gallery is ready.

However, the loading GIF doesn't work properly on Google Chrome; it works perfect fine on Firefox & IE (spinning flawlessly) - but gets stuck (doesn't spin properly) on Chrome, from the moment it appears until the gallery is ready.

Update: I know I can implement a better gallery (like the ones suggested in the comments) which would require less resources from the user when entering the gallery page - but I don't understand how this can be the cause for the problem when the GIF loader works perfectly on Firefox & IE.

Why doesn't the Ajax loading GIF work properly on Chrome?

Answer

Knu picture Knu · Aug 22, 2012

You just need to delete this declaration on line 602:

background-attachment: fixed;

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)

I have this problem. Chrome continues to return this error Resource interpreted as stylesheet but transferred with MIME type text/html The files affected by this error are just the Style, chosen and jquery-gentleselect (other CSS files that are imported …

Read More
Firebug-like debugger for Google Chrome

Is there anything like Firebug that you can use within Google Chrome? Essential features I would like: Inspect HTML source (select elements, delete them, etc.) check CSS values (the built-in solution is weird, somehow)

Read More