Databases
StackOverflow2013
Postsdbo
POphp/Ajax - Best practice for pre-loading images
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POphp/Ajax - Best practice for pre-loading images
    primarykey
    data
    text
    <p>I have put together a script which is very much like the flickr photostream feature. Two thumbnails next to each other, and when you click the next or prev links the next (or previous) two images slide in. Cool!</p> <p>Currently when the page loads it loads the two images. The first time nxt / prv is used then the next two images or previous two are loaded via ajax, with the id of the first image being passed in the url and the HTML for the two new images returned and displayed via ajax.</p> <p>simple enough, but it got me to thinking, on a slow connection, or heavy server load then the two images, although relatively small thumbnails could still take a while to load, and the nice things with sliding panes is the fact that the hidden data slides in quickly and smoothly preferbly without a loading delay.</p> <p>So I was wondering from a performance and good practice point of view which option is best, this is what I can think of for now, open to suggestions.</p> <p>1, call each set of images via JSON (its supposed to be fast?) </p> <p>2,load all the possible images into a json file and pull in the details that way - although browser will still have to load image. Plus sometimes there might be 4 images, other times there could be upto 1000!</p> <p>3, Load 10 images via php into a Json or other file, and load all 10 images into the browser hiding the 8 which are not on show, and always showing the middle two. Problem here is that each time someone clicks, the file has to reload the first and last images, which still takes up time, although i suppose the middle images will have all been cached via the browser by now though. But still there is a loading time.</p> <p>4, Is it possible to have a json image with all the image details (regardless of numbers) and use no 3 above to load 10 of those images, is it possible to use ajax to only read 10 lines and keep a pointer of the last one it read, so the json file can be loaded fast, short refresh and images either side are cached via the browser!!</p> <p>Hope thats clear, any suggestions on how you would handle this?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USPaul M
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POphp/Ajax - Best practice for pre-loading images
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POphp/Ajax - Best practice for pre-loading images
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POphp/Ajax - Best practice for pre-loading images
      1. USMilan Babuškov
      1. VTFavorite
    1. COJSON is a text based transfer format, I don't think it'll provide any benefit for preloading images?
      singulars
      1. POphp/Ajax - Best practice for pre-loading images
      1. USDave Marshall
    2. COYeah I was thinking more of it holding the image url, which I can then load via ajax, instead of requesting via php each time, just a quicker way to 'get' the info maybe?
      singulars
      1. POphp/Ajax - Best practice for pre-loading images
      1. USPaul M
 

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