# Preloading Images | kirupa.com
**URL:** https://forum.kirupa.com/t/preloading-images-kirupa-com/352435
**Category:** programming
**Created:** [November 23, 2014, 7:11am UTC](https://forum.kirupa.com/t/preloading-images-kirupa-com/352435 "2014-11-23T07:11:04Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 23, 2014, 7:11am UTC](https://forum.kirupa.com/t/preloading-images-kirupa-com/352435/1 "2014-11-23T07:11:05Z")
This is the place to discuss the Preloading Images tutorial: http://www.kirupa.com/html5/preloading\_images.htm :)
---
### Author:  [@Ozyris](https://forum.kirupa.com/u/Ozyris)
#### Post date: [March 24, 2017, 5:09pm UTC](https://forum.kirupa.com/t/preloading-images-kirupa-com/352435/2 "2017-03-24T17:09:15Z")
Greetings again Kirupa!!
I struggled to get the first example of the “full code” at the top of this tutorial working until I realised that it is trying to call the trackProgress function when it is not included in that code. Once I commented out the evenListener lines the code worked well. Was it your intention to leave the tempImage.addEventListener out of the first two examples?
Cheers.
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [March 25, 2017, 3:12am UTC](https://forum.kirupa.com/t/preloading-images-kirupa-com/352435/3 "2017-03-25T03:12:09Z")
The code for `trackProgres` is optional. It is only if you want to avoid people from interacting with your preloaded content until everything has loaded. It is simply a counter that keeps track of how many preloaded elements fired the **load** event. Once all elements have fired their load event, you can take the next step. In my case, it was allowing them to be hovered over. Your case my vary.
The important detail is that the trackProgress-related code is option. That’s why the first sections of code didn’t bother including it. The important part is having the array with the images you want preloaded and creating the `Image` objects with them.
🙂
---
### Author:  [@Ozyris](https://forum.kirupa.com/u/Ozyris)
#### Post date: [March 25, 2017, 11:02am UTC](https://forum.kirupa.com/t/preloading-images-kirupa-com/352435/4 "2017-03-25T11:02:51Z")
Heya Mr K!!
I did manage to work that one out. I just found that the preloading function bombed if I called a function that doesn’t exist. The moment I commented out or deleted the “tempImage.addEventListener” line the preload function worked perfectly.
Are you saying that the preload function should run exactly like you have it in the top example without including the trackProgress function in the code? In other words, should a script run fine if I call a nonexistent function?
Thanks.
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [March 25, 2017, 9:37pm UTC](https://forum.kirupa.com/t/preloading-images-kirupa-com/352435/5 "2017-03-25T21:37:41Z")
Sorry - you are right! I completely glossed over that line - just like I did when I put that in the example in the first place. The first part of the code should not have the call to tempImage.addEventListener. That was a mistake in my code ☹
The correct code, which I updated in the article (as you found out) is:
```
this.addEventListener("DOMContentLoaded", preloadImages, true);
function preloadImages(e) {
var imageArray = new Array("path/image.png", "path/image2.png", "path/image3.png");
for (var i = 0; i < imageArray.length; i++) {
var tempImage = new Image();
tempImage.src = imageArray[i];
}
}
```
😛
---
### Author:  [@Ozyris](https://forum.kirupa.com/u/Ozyris)
#### Post date: [March 26, 2017, 8:28am UTC](https://forum.kirupa.com/t/preloading-images-kirupa-com/352435/6 "2017-03-26T08:28:02Z")
Greetings sir!
Excellent news! I am not going mad then!
Might I just say that I am finding your videos and accompanying tuts extremely helpful! You have the knack of making each point clear, interesting and entertaining without being verbose! You are a very good presenter of this stuff! Thanks for everything you do!
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [March 27, 2017, 1:26am UTC](https://forum.kirupa.com/t/preloading-images-kirupa-com/352435/7 "2017-03-27T01:26:35Z")
Glad you like them, Ozyris!
Also, tens of thousands of people have read this article since it was posted, but you were the only one to point out this mistake. Thank you for taking the time to do what nobody else bothered to do 🙂
---
### Author:  [@Ozyris](https://forum.kirupa.com/u/Ozyris)
#### Post date: [April 4, 2017, 9:09am UTC](https://forum.kirupa.com/t/preloading-images-kirupa-com/352435/8 "2017-04-04T09:09:28Z")
Hi again Kirupa!
Hope I am not being a nuisance. Just wanted to share that, with your excellent help, I have now got my picture gallery working as I wanted it. Take a look at [www.smooth-operator.co.uk](http://www.smooth-operator.co.uk) and click the “pics” tab!
All JavaScript, CSS3 and HTML5!!
Thank you!
Now for the next stage…
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [April 5, 2017, 5:47pm UTC](https://forum.kirupa.com/t/preloading-images-kirupa-com/352435/9 "2017-04-05T17:47:33Z")
Not a nuisance at all! It is great to see it all working. Really nice work 🙂
---
### Author:  [@Ozyris](https://forum.kirupa.com/u/Ozyris)
#### Post date: [April 13, 2017, 11:16am UTC](https://forum.kirupa.com/t/preloading-images-kirupa-com/352435/10 "2017-04-13T11:16:19Z")
Hi again K-Man!
Not quite on topic, but I have now added the “Contact” page with lots of help from your excellent book and website. Still to add a Captcha type thing - wondering if there’s any reason not to design my own (how clever are the spambots?). Take a look how I’ve handled the response page! You’ll have to send me a little message.
So far the site seems to work fine across all PC browsers. I don’t have a mac so I haven’t checked that yet. It crashes completely in mobiles - google check tells me its partly because content is outside the viewport / screen but the site is designed using that. I will be making a totally separate mobile site anyway.
Its all on one “page” still and its still only uses HTML, CSS, JavaScript and a little PHP.
Thanks for your all help thus far! Much appreciated!
Onward! (as someone I know says)
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [April 13, 2017, 2:20pm UTC](https://forum.kirupa.com/t/preloading-images-kirupa-com/352435/11 "2017-04-13T14:20:19Z")
Can you post the URL to your page? That will help figure out what is going on 🙂
---
### Author:  [@Ozyris](https://forum.kirupa.com/u/Ozyris)
#### Post date: [April 13, 2017, 5:40pm UTC](https://forum.kirupa.com/t/preloading-images-kirupa-com/352435/12 "2017-04-13T17:40:13Z")
Hi Kirupa! Here’s the URL again:
[www.smooth-operator.co.uk](http://www.smooth-operator.co.uk)
Sorry, thought you had it already. 😀
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [April 13, 2017, 6:07pm UTC](https://forum.kirupa.com/t/preloading-images-kirupa-com/352435/13 "2017-04-13T18:07:17Z")
Sigh. Long day. You did post the URL earlier. You can definitely design your own captcha with a simple question, and you should be fine. Spam bots are really clever, but a lot of the current solutions are designed to partially help crowdsource image recognition of street signs, book scans, etc. A bunch of spam is filled out by real people, so even the best captcha is often not enough to stop spammers.
When I viewed your contact form in Google Chrome using their mobile simulator (via their Developer Tools), your content is outside the viewport:
Since you are planning on creating a fully mobile site, that is something that will get addressed 😛
---
### Author:  [@Ozyris](https://forum.kirupa.com/u/Ozyris)
#### Post date: [April 13, 2017, 6:53pm UTC](https://forum.kirupa.com/t/preloading-images-kirupa-com/352435/14 "2017-04-13T18:53:50Z")
Hi again and thanks for coming back to me.
Did you look at the site with a normal browser? If you send a message from the contact form you will see what I did with the response page!! Inspired by you!