Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This is a bit complicated, and I am unable to provide a quick fix to your code that you could just copy, paste and verify.</p> <p>In <code>get.php</code>, you load a document with a gallery, and you <em>make</em> it a working gallery from <code>$(document).ready()</code>.</p> <p>But in <code>show.php</code>, when you load the <code>get.php</code> file, <code>$(document).ready()</code> is not called. The <code>$(document).ready()</code> of <code>show.php</code> was already called long before, and your document is now in the <code>interactive</code> state. So when you load the layout, you do not automaticallly execute the code that makes that layout work.</p> <p>You have to move the <code>$(document).ready()</code> code in your <code>get.php</code> into <code>show.php</code>, and then bind it to the AJAX call completion. Or unbind the code in <code>get.php</code>: just call it from the end of the HTML without wrapping it in <code>$(document).ready()</code>.</p> <p><strong>This is not guaranteed in all browsers all the time</strong>, though, because while <code>$(document).ready()</code> is called properly on document being ready, in <code>show.php</code> what you do is you ask to load a HTML file.</p> <p>And the HTML gets loaded, and so <code>onLoad</code> gets fired. You can't expect different.</p> <p><em>Then</em> that HTML asks to load other assets (such as images), but the browser did not know this. It has already fired the <code>onLoad</code> and so you already executed the gallery setup code. If the layout requires the images' SRC to be <em>already loaded</em> in order to style properly, then it will not always work. It might work the second time because the images are in the browser cache. It may work on fast connections and not on slow connections; it may work with small images, quickly loaded, and not with larger images. All these behaviours indicate that <em>images being already loaded is necessary</em>.</p> <p>Again, a quick and dirty fix is to fire the setup after a suitable delay (but what is suitable? You can't know). Another possibility, if all the images are of known sizes, is to supply those sizes in HTML or CSS. After all, the layout usually requires images being loaded <em>so that they occupy space on the page</em>, but for that, you don't need images to be actually <em>displayable</em>. They might be empty spaces (maybe styled with a background).</p> <p>A third possibility, more complicated but guaranteed to work in all browsers, is to save the image SRC's into another kind of tag (e.g. DIVs with a class of <em>imageloading</em>, by default hidden), and after the load() success to analyze these tags and convert them to IMGs attaching an <code>onload</code> to them. When all those onloads have fired, you know that it's OK to launch the gallery setup. While longer to describe (and code), this last method is actually <em>much faster</em> than the naive "quick fix: wait a bit and fire setup" one.</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.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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