Javascript preload images snippet doesn't work

Question

I really cant't get what's wrong with this preload snippet of mine, It doesn't matter the loadingWrapper dissapears like the if statement does't work. Hope anyone could spot out the problem:

//html

<script type='text/javascript'>$(document).ready(function(){preloadImages()});</script>

//js

function preloadImages()
{
var xmlDoc = loadXMLDoc("http://www.wdagdesign.com/ice2/menu.xml");
var y = xmlDoc.getElementsByTagName("title");
var imgCount = y.length;


for(var i=0; i<imgCount;i++)
{
    var imgObj = new Image();
    var $pic = xmlDoc.getElementsByTagName("pic")[i].childNodes[0].nodeValue;

    imgObj.src = $pic;
    imgObj.onLoad = imagesLoaded($pic);
}
}


var $imageCount = 0;

function itemsLength()
{
var xmlDoc = loadXMLDoc("http://www.wdagdesign.com/ice2/menu.xml");
var y = xmlDoc.getElementsByTagName("title");

return y.length;
}




function imagesLoaded($pic)
{

$imageCount += 1;

if($imageCount != itemsLength())
{
    return;

}else{


    createMenu();
    var $loadingWrapper = document.getElementById('loadingWrapper');
    var $loading= document.getElementById('loading');
    TweenMax.to($loadingWrapper,0,{css:{display:'none'}});
    TweenMax.to($loading,0,{css:{display:'none'}});
    $imageCount = 0;


}

}



function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
{
    xhttp=new XMLHttpRequest();
}
else
{
    xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",dname,false);
xhttp.setRequestHeader("Cache-Control", "no-cache");
xhttp.setRequestHeader("Pragma", "no-cache");
xhttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
xhttp.send();
return xhttp.responseXML;
}

Hope anyone could give me a hand on this issue. Greetings.

Why are you constructing an XMLHttpRequest manually if you're already using jQuery? It seems like you copy/pasted a few code snippets into your website. — Blender, Dec 12 '12 at 18:32
Actually I'm learning Javascript man, I'm not used to jQuery and I learned this way to request for my XML. @Blender. Not at all, I'm proud of my work dude, Im not a copy paste man. — Diego, Dec 12 '12 at 18:49

score 1 · Answer 1 · answered Dec 12 '12 at 18:56

1

Instead of rolling out your own image preloader (unless you want to learn how it works), I'd use an existing solution instead, like waitForImages.

This should behave identically to the code that you have:

Add this script tag:

<script src="https://raw.github.com/alexanderdickson/waitForImages/master/src/jquery.waitforimages.js"></script>

And you can use this JS code:

$(document).ready(function() {
    $('body').waitForImages({
        waitForAll: true,
        finished: function() {
            createMenu();

            $('#loadingWrapper, #loading').fadeOut();
        }  
    });
});

answered Dec 12 '12 at 18:56

Blender

289,723
53
439
496

thanks four your time man. I really want to have total control on this "prealoding images snippet" (I have to build 3 different dynamical menus from XML's and I would like to stick with my code in order to have control of what is happening. If all fail, I'm going to look for your suggestion. Greetings buddie. – Diego Dec 12 '12 at 19:20
@Diego: What's there to control? – Blender Dec 12 '12 at 19:21
actually how does it work it's really important to me because I can handle errors and such because this images are not loaded from the body or anything built from the beggining. Using your method I'm in the same place due that createMenu() comes after the body has finished to load their images, but this images are not in the body per-se. I tried it and it's the same result, loadingWrapper go away but there are none images loaded. I really appreciate your time and I hope you can see another workaround. Greetings man. – Diego Dec 12 '12 at 19:33
Keep in mind that that `script` element's resource may change at any stage :) – alex Jan 09 '13 at 02:47

score 0 · Answer 2 · answered Dec 12 '12 at 18:35

0

I think your problem is with onLoad method:

imgObj.onload = imagesLoaded($pic);

it should be :

imgObj.onload = function () {
    imagesLoaded($pic);
};

In the first case the imagesLoaded function was being called right away. In my example the function runs when the image is loaded

answered Dec 12 '12 at 18:35

Ibu

42,752
13
76
103

Thanks man for your time @Ibu. I put the function into the anonymous function but now the LoadingWrapper stuck there (I did it your way). Then I wrapped the whole thing in order to run like: imgObj.onLoad = (function(){imagesLoaded($pic)})(); but the first problems does happen. Hope you can see another workaround. Thanks again for your time. – Diego Dec 12 '12 at 19:21

score 0 · Answer 3 · answered Dec 14 '12 at 03:25

Casting my less than experienced eye over this, 2 questions.

Do you need this in your html script?

$(document).ready(function(){preloadImages()});

If you are preloading, you want them loading immediately, not necessarily after the document is ready.

And the following;

TweenMax.to($loadingWrapper,0,{css:{display:'none'}});
TweenMax.to($loading,0,{css:{display:'none'}});

The display:"none" will hide the output until you change it to display:"block" (or something else). I don't know the API for the TweenMax.to(), but if the css parameter is optional, try just deleting it.

Javascript preload images snippet doesn't work

3 Answers3