Databases
StackOverflow2013
Postsdbo
POLoading GIF (Preloader) gets stuck only on Chrome
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLoading GIF (Preloader) gets stuck only on Chrome
    primarykey
    data
    text
    <p>I have a gallery in my website. The gallery contains 15 images, each one of them is approximately 500KB (total size is 7.5MB). </p> <p>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 <a href="https://i.stack.imgur.com/UUjhE.gif" rel="noreferrer">Ajax loading GIF</a>. </p> <p><strong>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.</strong> </p> <hr> <p>In order to achieve my goal, this is what I've done:</p> <p><em>This is the beginning of the body of the gallery HTML page:</em></p> <pre><code>&lt;body&gt; &lt;img src="images/ajax-loader.gif" alt="" class="hiddenPic" /&gt; &lt;!-- loading Ajax loading GIF before all the other images --&gt; </code></pre> <p><em>And this is the gallery CSS part:</em></p> <pre><code>#gallery { background: url(images/ajax-loader.gif); background-repeat:no-repeat; background-attachment: fixed; background-position: center; </code></pre> <p>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 <code>&lt;body&gt;</code> that is going to be downloaded. However, it's not visible due to the <code>hiddenPic</code> class.</p> <p>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.</p> <hr> <p><strong>However</strong>, the loading GIF doesn't work properly on Google Chrome; it works perfect fine on Firefox &amp; IE (spinning flawlessly) - but gets stuck (doesn't spin properly) on Chrome, from the moment it appears until the gallery is ready.</p> <p><strong><em>Update:</em></strong> 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 &amp; IE. </p> <p><strong>Why doesn't the Ajax loading GIF work properly on Chrome?</strong></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USamiregelz
    1. USamiregelz
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POLoading GIF (Preloader) gets stuck only on Chrome
      1. USamiregelz
      1. VTBountyStart
    2. VO
      singulars
      1. POLoading GIF (Preloader) gets stuck only on Chrome
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POLoading GIF (Preloader) gets stuck only on Chrome
      1. This table or related slice is empty.
      1. VTUpMod
    1. COLoading your website it seems to work as expected, even in Chrome (v21.0.1180.77 m). Certainly when I load the page I am presented with the GIF spinner, which later gets replaced by the gallery. I would say it's fairly slow, ie. I don't see the spinner "spin" I just see it in 3 or 4 various positions, but that's presumably down to loading the rest of the gallery and my PC being a tad slow. However, I'm loading the gallery in about 5-6 seconds not the 25 seconds you suggest so that may be affecting results.
      singulars
      1. POLoading GIF (Preloader) gets stuck only on Chrome
      1. USChris
    2. COAlso, while I think you should absolutely have a GIF spinner, I wonder if you should be loading the entire gallery straight away, for two reasons: 1) it's slows the whole page and 2) it wastes bandwidth as people may not view all the pictures. I would explore a process of either 1) loading each image when it's selected (so gif spinner for each image) or 2) load say the first 3. Then when they hit 'Next Image' (to show image 2) load image 4. They won't see any difference but makes it much faster and efficient.
      singulars
      1. POLoading GIF (Preloader) gets stuck only on Chrome
      1. USChris
    3. COSo the reason the spinner is stuck is because loading the gallery images takes most of the resources? I want to make the loader spin - the GIF is not that heavy so I don't see why it gets stuck and I can't make it spin properly, even (well, only) when the images are being downloaded to the computer. About your suggestion, it sounds like a great way to shorten the waiting time and make it work fast. I'm not sure which way is better, but if I will use no'1 I have to add thumbnails to my gallery.
      singulars
      1. POLoading GIF (Preloader) gets stuck only on Chrome
      1. USamiregelz
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload