Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>Edit</strong> - See the bottom of this answer, a much better idea came to me</p> <h3>Original Answer</h3> <p>Yes, totally possible. Others have noted plug-ins for doing this, which are great in that they come pre-tested and such, but if you want to do it yourself it's surprisingly easy. You add <code>img</code> elements to the DOM (document object model):</p> <pre><code>function addAnImage(targetId, src, width, height) { var img; img = document.createElement('img'); img.src = src; img.style.width = width + "px"; img.style.height = height + "px"; target = document.getElementById(targetId); target.appendChild(img); } </code></pre> <p>(I couldn't immediately recall how to set the <code>alt</code> attribute; it may well be <code>img.alt = "...";</code>)</p> <p>Naturally you'll want to add some error checking to that. :-) So for one of your images, you want to add them to the <code>pics</code> div, so for example:</p> <pre><code>addAnImage('pics', 'images/cs12.png', 200, 200); </code></pre> <p>Set up a function to add your images and call it when the page is loaded (either using <code>window.onload</code> or whatever support your JavaScript library, if any, has for doing things a bit earlier than that). For instance, your load script might look like this (I don't typically use <code>window.onload</code>, but it's convenient for an example):</p> <pre><code>function pageLoad() { var images = [ {src: "images/cs9.png", width: 270, height: 270, alt: "teaching"}, {src: "images/cs1.png", width: 200, height: 200, alt: "teaching"}, {src: "images/cs3.png", width: 200, height: 200, alt: "teaching"}, // ..., make sure the last one *doesn't* have a comma at the end ]; var index; // Kick start the load process index = 0; nextImageHandler(); // Load an image and schedule the next function nextImageHandler() { var imgdata; imgdata = images[index]; addOneImage('pics', imgdata.src, imgdata.width, imgdata.height); ++index; if (index &lt; images.length) { window.setTimeout(nextImagePlease, 200); } } } window.onload = pageLoad; </code></pre> <p>On window load, that will load the first image and then schedule the next one to be loaded 200ms (a fifth of a second) later. When that happens, it'll schedule the next, etc., etc., until it's loaded all of the images.</p> <p>JavaScript libraries like jQuery, Prototype, Closure, etc. typically have various helper functions for this sort of thing.</p> <h3>Updated answer</h3> <p>The above is fine, but it means that you have to completely change how you layout your pages, and you have to intermix content stuff (the image sources and sizes) with your JavaScript, etc. Blech.</p> <p>How 'bout this: Make all of your image tags that are the same size refer to the same image:</p> <pre><code>&lt;div id="pics"&gt; &lt;img src="images/w270h270.png" width="270" height="270" alt="teaching"/&gt; &lt;img src="images/w200h200.png" width="200" height="200" alt="teaching"/&gt; &lt;img src="images/w200h200.png" width="200" height="200" alt="teaching"/&gt; ... </code></pre> <p>These would be placeholders. Then, add data attributes to them with the real image source:</p> <pre><code>&lt;div id="pics"&gt; &lt;img src="images/w270h270.png" data-src="cs9.png" width="270" height="270" alt="teaching"/&gt; &lt;img src="images/w200h200.png" data-src="cs1.png" width="200" height="200" alt="teaching"/&gt; &lt;img src="images/w200h200.png" data-src="cs3.png" width="200" height="200" alt="teaching"/&gt; ... </code></pre> <p>Attributes in the form <code>data-xyz</code> will be valid as of HTML5 (and they work today, they just don't validate).</p> <p>Now the magic: Once the main load is completed, you walk through the <code>img</code> tags in the DOM, updating their <code>src</code> to make their <code>data-src</code> attribute:</p> <pre><code>function pageLoad() { var nodeList, index; // Get a NodeList of all of the images on the page; will include // both the images we want to update and those we don't nodeList = document.body.getElementsByTagName('img'); // Kick-start the process index = 0; backgroundLoader(); // Our background loader function backgroundLoader() { var img, src; // Note we check at the beginning of the function rather than // the end when we're scheduling. That's because NodeLists are // *live*, so they can change between invocations of our function. // So avoid going past what is _now_ the end of the list. // And yes, this means that if you remove images from // the middle of the document while the load process is running, // we may end up missing some. Don't do that, or account for it. if (index &gt;= nodeList.length) { // we're done return; } // Get this image img = nodeList[index]; // Process it src = img.getAttribute("data-src"); if (src) { // It's one of our special ones img.src = src; img.removeAttribute("data-src"); } // Schedule the next one ++index; window.setTimeout(backgroundLoader, 200); } } window.onload = pageLoad; </code></pre> <p>Again, you'll want to add error handling and that's completely untested, but fundamentally it should work.</p>
    singulars
    1. This table or related slice is empty.
    1. POUse Javascript to load some images last
      singulars
      1. PTQuestion
    1. PTAnswer
    1. UST.J. Crowder
    1. UST.J. Crowder
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POUse Javascript to load some images last
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COExcellent, thanks very much, I'll try it out now
      singulars
      1. PO
      1. USjamie holliday
    2. CODid anyone try this to see if it works as expected?
      singulars
      1. PO
      1. USS. Fellig
 

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