3

I'm trying to make an image gallery that will show lots of art. Therefore the website will have lots of images. I noticed that when I viewed my code on another computer the images would take time to load. While on my computer they would display straight away and I guessing this is due to them already being cached.

So I did some looking around to see if I could prevent this and I found lots of people mentioning preloading images. However, I couldn't really find a solution that fits my desire or a explanation I could understand(I hate using code I don't understand). So I tried to have a go myself and it didn't work out, but I felt the logic I what I writing was right but needs tweaking I'm going to write my code below and any advice on what need to do next would be greatly appreciated.

Preloading images code:

var allImages = $(img).attr('src'); //select every image
var preloadImages = [];

//add images to empty array
for(var i = 0; i < allImages.length; i++ )  {
 preloadImages.push(allImages[i]);
}

//then preload images
for(var i = 0; i < preloadImages.length; i++ )  {
 new Image().src = preloadImages[i];
}

So that is the code I wrote to preload images on my page. Let me know where I'm going wrong. I'm really not sure how I go about selecting all images on my website and loading them into an array I can then cycle over?

Thanks for the responses I guess I didn't explain my problem that well. A lot of the solutions to preloading images seem to be manually typing in every image src into and array. What I was looking for was a way to select every image I have and then put them into an array without actually typing them in. Is that possible? My reason for that is when I keep adding more and more images it would be great if the preloading could just take care of itself.

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
user3660857
  • 333
  • 3
  • 13
  • 2
    Possible [duplicate](http://stackoverflow.com/questions/476679/preloading-images-with-jquery), gives both native JavaSript and jQuery solutions. – NightOwlPrgmr Jun 23 '15 at 11:23
  • 1
    What is `img` on the first line of your code? If you meant `"img"` I don't think the idea of extracting the `src` from actual `` elements on the page is going to help you preload anything, because at that point the browser already knows about all those images and their sources anyway. – nnnnnn Jun 23 '15 at 11:38
  • @nnnnnn that's the point of my answer. It doesn't matter what it is - `.attr` is only going to give one element's return value. – jcuenod Jun 23 '15 at 11:38
  • @user3660857 have you solved the problem? – jcuenod Jun 23 '15 at 12:02
  • Your kind of preload makes no sense as all those images would have already been _loaded_ on to the browser. What are you actually after? – lshettyl Jun 23 '15 at 12:05
  • When reading other posts I saw that people were preloading images by typing every image src into an array. What I was looking to find was a way I could fill an array without typing in every image so as I add more and more images it takes care of itself and I don't have to keep writing new images into the array. – user3660857 Jun 23 '15 at 13:57
  • I can understand not wanting to manually maintain a list of images, but the whole point of preloading is to get the images into the browser cache *before* the page needs to display them. So as per my previous comment it doesn't make sense to try to do it for images already directly in the html because the browser already knows to load those. It *does* make sense to do it for other images that won't be displayed until later in response to some event, if you're going to be creating image elements or changing `src` attributes dynamically. – nnnnnn Jun 24 '15 at 03:38
  • You have to load them in order to get them into the cache, and this will take the same amount of time whether you load them into the page, or the cache and then the page. It's literally no different. I think you may want to consider lazy loading, where images are only loaded when they're visible. Consider a page with 500 images but the user never scrolls past the first 10. In that scenario they would only ever load the first 10, but if they scrolled down to 12 then the page would load only 2. This is far better than loading them all at once, even with a preloader. – Reinstate Monica Cellio Jan 08 '19 at 17:51

0 Answers0