Menu
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?
853
You just need to delete this declaration on line 602:
background-attachment: fixed;
I also had the same problem. The way I fixed it was to put the loading gif in it's own element (to keep markup clean, use a pseudo element).
Now, instead of using the background-attachment rule, you can use position: fixed. Here's the code you should use (assuming you'd like that loader gif to sit right in the middle of the screen):
#gallery:after {
content: "";
background: url(images/ajax-loader.gif);
position: fixed;
top: 50%;
left: 50%;
width: 50px; /*change to the width of your image*/
height: 50px; /*change to the height of your image*/
margin-left: -25px; /*Make this 1/2 the width of your image */
margin-top: -25px; /*Make this 1/2 the height of your image */
}
Hope this helps!
44
I'm a strong advocate of using dataURI with base64-encoded images in this and similar situations. What it does is effectively eliminates the need for a separate http request to retrieve the spinner gif, meaning the "loading" animation is immediately available to be rendered. This makes the value of the UX improvement so more valuable than a couple extra kilobytes in overhead - especially since the stylesheet would be only downloaded once and then cached by the client.
This fiddle has the animation embedded from ajaxload.info, having added literally less than 1KB to the final CSS.
Note that this kind of resource embedding is not supported at all on IE7 (but IE7 users have much bigger concerns to address :)
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
