Databases
StackOverflow2013
Postsdbo
POWait for images to load and then execute all other code
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWait for images to load and then execute all other code
    primarykey
    data
    text
    <p>OK, I'm losing my mind over this. I did read here at SO and google about it, I even have the preloader set (found here on SO), but none of the plugins/code I found helped me. </p> <p>What I want to do is: wait until all images are preloaded and only then execute all other javascript code. As far as I'm concerned it can (but not a must) have a "loading..." message. </p> <p>The fact is that I have a pretty big image in the body background and 2 other images which are also bigger, and so I would like to preload them so that then they would show instantly and would not have that ugly "loading" image effect. </p> <p>This is what I'm using now but it's not good:</p> <pre><code>$(document).ready(function() { preloadImages(); ...some other code... function preloadImages(){ imagePreloader([ 'images/1.png', 'images/2.jpg', 'images/3.png', ]); } function imagePreloader(arrayOfImages) { $(arrayOfImages).each(function(){ (new Image()).src = this; }); } } </code></pre> <p>I don't know, maybe I should call this preloader somewhere out of the .ready()? or sth like that, please help...</p> <p>Btw, yes, I also read <a href="https://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-something">this</a> post and I don't know why but .ready() works faster for me :(</p> <p><strong>EDIT:</strong><br> Ok, so finally I got this thing to work. My problem? I was setting the waiting div wrong. This is my code now: I have the loading div which I show above everything and then when all images load (using $(window).load(function(){...}); as suggested I, hide that div. </p> <pre><code>&lt;div id="loading"&gt; &lt;div id="waiting"&gt; &lt;img class="loadingGif" src="images/loading.gif"&gt; &lt;/div&gt; &lt;/div&gt; #loading { background-size: 100%; background-color:#000; width: 100%; height: 100%; margin: 0px; padding: 0px; z-index:999; } #waiting { margin-left: auto; margin-right: auto; position:absolute; top: 39%; left: 27.81%; width: 45%; height: 150px; background-color: #FFF; border: 12px solid #FF771C; text-align: center; } </code></pre> <p>And my jQuery code is this: </p> <pre><code>$(window).load(function() { $('#loading').addClass('hidden'); ... } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USNikola
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    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. POWait for images to load and then execute all other code
      1. USTanner Ottinger
      1. VTFavorite
    2. VO
      singulars
      1. POWait for images to load and then execute all other code
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POWait for images to load and then execute all other code
      1. This table or related slice is empty.
      1. VTUpMod
    1. COJust change ".ready" to ".load" and you should be all set.
      singulars
      1. POWait for images to load and then execute all other code
      1. USPointy
 

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