CODEWITHSUNDEEP
javascriptimage-preloader
Diego
Diego

Reputation: 591

Javascript preload images snippet doesn't work

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.

Upvotes: 0

Views: 486

Answers (3)

Matt Stevens
Matt Stevens

Reputation: 1124

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.

Upvotes: 0

Blender
Blender

Reputation: 298166

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();
        }  
    });
});

Upvotes: 1

Ibu
Ibu

Reputation: 43810

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

Upvotes: 0

Related Questions