Preloading Images | kirupa.com


#1
This is the place to discuss the Preloading Images tutorial: http://www.kirupa.com/html5/preloading_images.htm :)

#2

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.


#3

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.

:slight_smile:


#4

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.


#5

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 :frowning:

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];
    }
}  

:stuck_out_tongue:


#6

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!


#7

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 :slight_smile:


#8

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 and click the “pics” tab!

All JavaScript, CSS3 and HTML5!!

Thank you!

Now for the next stage…


#9

Not a nuisance at all! It is great to see it all working. Really nice work :slight_smile:


#10

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)


#11

Can you post the URL to your page? That will help figure out what is going on :slight_smile:


#12

Hi Kirupa! Here’s the URL again:

www.smooth-operator.co.uk

Sorry, thought you had it already. :grinning:


#13

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 :stuck_out_tongue:


#14

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!