StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Better to load in all elements on the initial DOM load. You'll use a lot of resources "painting" as google dev tools calls it as you move z-indexes of "visible to browser" images will not perform very good at all. The browser still has to "paint" each image. Use <strong>hide()</strong> and <strong>show()</strong>. Basically sets <strong>display:none;</strong>. The browser does not have to paint hidden elements in the DOM.</p> <p>EDIT: Question update: The answer below answers your iFrame question, but doesn't address your question about hogging resources. I don't know how chrome handles iFrames, but if all your script is on one page, it's left up to the browser to process the data using system-side resources. Chrome's V8 engine is amazing at multithreading js processes. I'd say with two pages, not only would double-function work add resources, chrome might not be able to multithread multiple scripts in iFrames. Not sure, but its a possibility.</p> <p>EDIT: Question update: iFrames? Terrible. It's not good to have two scripts running asynchronously when you can make your JS dynamic. For example.</p> <p>First Page's code:</p> <pre><code>var imgArray = []; function fetchImageArray() { $.ajax({ url:"thispagesimages.php" success: function(data) { imgArray = data.imgs; } }); } </code></pre> <p>Second Page:</p> <pre><code>var imgArray = []; function fetchImageArray() { $.ajax({ url:"thatpagesimages.php" success: function(data) { imgArray = data.imgs; } }); } </code></pre> <p><strong>OR a dynamic function - no iFrames.</strong> Single page fetch function</p> <pre><code>function fetchImageArray(urlg, ss) { $.ajax({ url: urlg data: {whichSlideShow: ss} success: function(data) { return data.imgs; } }); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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