0

With ajax I am getting an array of image urls, creating ul list and adding it to the page. After that I turn on Photoswipe slider to show these images. Problem occurs on phones (ipod, htc): pictures do not have time to load. Is there a way to load all the images somewhere to the temp before turning on the slider?

Nikola
  • 14,888
  • 21
  • 101
  • 165
Andresh Podzimovsky
  • 1,511
  • 4
  • 13
  • 17
  • possible duplicate: http://stackoverflow.com/questions/476679/preloading-images-with-jquery – Nikola Sep 06 '12 at 07:55

1 Answers1

0

You can create Image objects when the page loads, this will cause the image to be retrived from the remote server and stored in the browser cache without being displayed on the page. When you include and <img> element on the page that references the same remote image, it will be served from the browser cache and displayed more or less instantly:

new Image().src = 'http://myserver.com/myimage.jpg';
...
<img src="http://myserver.com/myimage.jpg" />

There is no need to save a reference to the Image objects, just assigning the src property as shown will be enough to get them cached by the browser.

codebox
  • 19,927
  • 9
  • 63
  • 81
  • you don't need to save the Image objects into an array, just create them so that the file gets retrieved and then forget about them – codebox Sep 06 '12 at 08:03
  • Is there some way to track this operation and do some stuff(in my case load slider) after all images are loaded? – Andresh Podzimovsky Sep 06 '12 at 08:05
  • You can assign an 'onload' handler to the image object which will run when the image gets retrieved, eg var img = new Image(); img.src = 'blah'; img.onload = function(){...} – codebox Sep 06 '12 at 08:11
  • in console found ReferenceError: invalid assignment left-hand side – Andresh Podzimovsky Sep 06 '12 at 08:20
  • Instead of "new load_image.src ='index.php?..." try "new Image().src ='index.php?..." – codebox Sep 06 '12 at 08:21
  • Yes, sorry, my mistake, but problem in general not solved. As it was before - slider loads blank. May be the problem is because it loads images from href, not img? – Andresh Podzimovsky Sep 06 '12 at 08:26