Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery .load() wait till content is loaded
    primarykey
    data
    text
    <p>How to prevent jQuery <code>$('body').load('something.php');</code> from changing <strong>any</strong> DOM till all the content from <strong>something.php</strong> (including images,js) is <strong>fully</strong> <strong>loaded</strong></p> <p>-Lets say some actual content is:</p> <pre><code>Hello world </code></pre> <p>And <code>something.php</code> content is:</p> <pre><code>image that loads for 10 seconds 20 js plugins </code></pre> <p>After firing .load() function nothing should happen, till images an js files are fully loaded, and <code>THEN</code> instantly change the content.</p> <p>some preloader may appear, but its not subject of question.</p> <p><strong>[edit]----------------------------------------------------------------------</strong></p> <p>My solution for that was css code (css is loaded always before dom is build) that has cross-browser opacity 0.</p> <pre><code>.transparent{ -moz-opacity: 0.00; opacity: 0.00; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); filter:alpha(opacity=0); } </code></pre> <p>And it prevent from bad flickr of content usually but not always. Now its possible to detect somehow that content is loaded by jQuery ajax and apply some show timeout and so on. But in fact question is still open.</p> <p>To make now a little more simple example for that question:</p> <p>How to begin changing DOM after $('body').load('something.php') with 3000ms delay after clicking the link that fire .load('something.php') function? (Browser should start downloading instantly, but DOM changing has to be initiated later)</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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