Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <pre><code>// // You have dozen of hd photos, and don't want to embed them right from the get go // in order to avoid 'interlaced' load, boost application load, etc. // Idea is to place lo-res photos, temporarily, in place where hd ones should go, // while downloading full quality images in the background. // // People usualy do this kind of caching by attaching 'onload' event handler to off-screen // Image object ( created by new Image(), document.createElement('img'), or any // other fashion ), which gets executed natively by a browser when the event // ( 'onload' in this case ) occurs, and setting the '.src' property of an image to // the phisical path ( relative/absolute ) of an img to start the download process. // The script pressented here use that approach for multiple images, // and notifies of task done by running provided function. // // So, solution is to provide locations of images you want to, // and get notified when they get fully downloaded, and cached by browser. // To do that you pass a function as 1st parameter to the fn below, // passing as many images as needed after it. // // Code will scan through provided images keeping the ones that are actualy // image files( .jpeg, .png, .tiff, etc.), create 'off-screen' Image objects // and attach onload/onerror/onabort handler fn to each one( which will be called // when coresponding circumstance occurs ), and initiate loading by setting the // .src property of an Image object. // // After the 'load-handler' has been called the number of times that coresponds to // number of images ( meaning the dload process is done ), script notifies you // of job done by running the function you provided as first argument to it, // additinaly passing images( that are cached and ready to go ) as // parameters to callback fn you supplied. // // Inside the callback you do whatever you do with cached photos. // function hd_pics_dload( fn /* ,...hd-s */ ) { var n = 0, // this one is used as counter/flag to signal the download end P = [], // array to hold Image objects // here goes the image filtering stuff part, // all the images that pass the 'regex' test // ( the ones that have valid image extension ) // are considerd valid, and are kept for download arg_imgs = Array.prototype.filter.call( Array.prototype.slice.call( arguments, 1 ), function ( imgstr ) { return ( /\.(?:jpe?g|jpe|png|gif|bmp|tiff?|tga|iff)$/i ).test( imgstr ); } ); // aborts script if no images are provided // runs passed function anyway if ( arg_imgs.length === 0 ) { fn.apply( document, arg_imgs ); return arg_imgs; } // this part keeps track of number of 'load-handler' calls, // when 'n' hits the amount of given photos // provided callback is runned ( signaling load complete ) // and whatever code is inside of it, it is executed. // it passes images as parameters to callback, // and sets it's context ( this ) to document object var hd_imgs_load_handler = function ( e ) { // logs the progress to the console console.log( e.type, ' -- &gt; ', this.src ); ( ++n === arg_imgs.length ) &amp;&amp; fn.apply( document, arg_imgs ); }; // this part loops through given images, // populates the P[] with Image objects, // attaches 'hd_imgs_load_handler' event handler to each one, // and starts up the download thing( by setting '.src' to coresponding image path ) for ( var i = 0, len = arg_imgs.length; i &lt; len; i++ ) { P[i] = new Image; P[i].onabort = hd_imgs_load_handler; P[i].onerror = hd_imgs_load_handler; P[i].onload = hd_imgs_load_handler; P[i].src = arg_imgs[i]; } // it gives back images that are about to be loaded return arg_imgs; } // // use: hd_pics_dload( // 1st provide a function that will handle photos once cached function () { console.log('done -&gt; ', arguments ); }, // and provide pics, as many as needed, here // don't forget to separate all parameters with a comma 'http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Flag_of_the_United_Nations.svg/2000px-Flag_of_the_United_Nations.svg.png', 'http://upload.wikimedia.org/wikipedia/commons/e/e5/IBM_Port-A-Punch.jpg', 'http://upload.wikimedia.org/wikipedia/commons/7/7e/Tim_Berners-Lee_CP_2.jpg', 'http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/NewTux.svg/2000px-NewTux.svg.png', 'http://upload.wikimedia.org/wikipedia/commons/4/4c/Beekeeper_keeping_bees.jpg', 'http://upload.wikimedia.org/wikipedia/commons/9/9a/100607-F-1234S-004.jpg' ); // </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POFast Image loading methods, low to high res with multiple backgrounds - javascript solution?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USpublic override
    1. USpublic override
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POFast Image loading methods, low to high res with multiple backgrounds - javascript solution?
      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
    1. COWhile someone with a few weeks of javascript under his belt would likely breeze through this script, I only began javascript two days ago; Could you comment your code there, or walk me through how this works so that I might understand how to use the principle of your solution in my own scripts?
      singulars
      1. PO
      1. This table or related slice is empty.
    2. COhere's the edit, I hope it's clear enough, mind my english btw.
      singulars
      1. PO
      1. USpublic override
    3. COOk, now that I understand this method, I realize that this is the most accurate and well thought out answer to my question. Thank you very much this will help
      singulars
      1. PO
      1. This table or related slice is empty.
 

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