Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>NOTE:</strong> I wrote this in 2010, the browsers in the wild were IE 8/9 beta, Firefox 3.x, and Chrome 4.x. Please use this for research purposes only, I doubt you could copy/paste this into a modern browser and have it work without issue.</p> <p><strong>WARNING:</strong> It is 2017 now I still get points on this now and then, please only use this for research purposes. I currently have no idea how to detect image loading status, but there are probably much more graceful ways of doing it than this... at least I seriously hope there are. I highly recommend NOT using my code in a production environment without more research.</p> <hr> <p>I'm a bit late to this party, maybe this answer will help someone else...</p> <p>If you're using jQuery don't bother with the stock event handlers (onclick/onmouseover/etc), actually just stop using them altogether. Use the event methods they provided in their <a href="http://api.jquery.com/category/events/" rel="nofollow noreferrer">API</a>.</p> <hr> <p>This will alert, before the image is appended to the body, because load event is triggered when the image is loaded into memory. It is doing exactly what you tell it to: create an image with the src of test.jpg, when test.jpg loads do an alert, then append it to the body.</p> <pre><code>var img = $('&lt;img src="test.jpg" /&gt;'); img.load(function() { alert('Image Loaded'); }); $('body').append(img); </code></pre> <hr> <p>This will alert, after the image is inserted into the body, again, doing what you told it to: create an image, set an event (no src set, so it hasn't loaded), append the image to the body (still no src), now set the src... now the image is loaded so the event is triggered.</p> <pre><code>var img = $('&lt;img /&gt;'); img.load(function() { alert('Image Loaded'); }); $('body').append(img); $img.attr('src','test.jpg'); </code></pre> <hr> <p>You can of course also add an error handler and merge a bunch of events using bind().</p> <pre><code>var img = $('&lt;img /&gt;'); img.bind({ load: function() { alert('Image loaded.'); }, error: function() { alert('Error thrown, image didn\'t load, probably a 404.'); } }); $('body').append(img); img.attr('src','test.jpg'); </code></pre> <hr> <p>Per the request by @ChrisKempen ...</p> <p>Here is a non-event driven way of determining if the images are broken after the DOM is loaded. This code is a derivative of code from an article by <a href="http://stereochro.me/ideas/detecting-broken-images-js" rel="nofollow noreferrer">StereoChrome</a> which uses naturalWidth, naturalHeight, and complete attributes to determine if the image exists.</p> <pre><code>$('img').each(function() { if (this.naturalWidth === 0 || this.naturalHeight === 0 || this.complete === false) { alert('broken image'); } }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POBrowser-independent way to detect when image has been loaded
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USPaul J
    1. USPaul J
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POBrowser-independent way to detect when image has been loaded
      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. VTAcceptedByOriginator
    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. COWARNING: From the jquery docs: Caveats of the load event when used with images: A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are: It doesn't work consistently nor reliably cross-browser It doesn't fire correctly in WebKit if the image src is set to the same src as before It doesn't correctly bubble up the DOM tree Can cease to fire for images that already live in the browser's cache
      singulars
      1. PO
      1. USBen
    2. COExcellent point @Ben.
      singulars
      1. PO
      1. USPaul J
    3. COI'm even later to the party, but what if the images have already been added and you need to check if they have been loaded? Thank you for any thoughts / suggestions! :)
      singulars
      1. PO
      1. USChris Kempen
 

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