JS OnLoad Images Not Being Resized

Question

So I am sure I am missing something small here. I wrote this awhile ago but I came back to it the other day to try and remember why I stopped working on it. Then I realized it's because when you load the page for the first time it doesn't resize the images in the image gallery container.

Then on page refresh the images resize themselves the way they are supposed to. Here is the code.

var ImageGallery = (function(){
    /*
    Load Images expects an array of URLS for your images, then
    it returns an array of new images.
    */
    function loadImages(urls){
        var images = [];

        for(i = 0; i < urls.length; i++){
            var tempImage = new Image();
            tempImage.src = urls[i];
            tempImage.className = "slider-images";

            var image = scaleImage(tempImage, 100,100);
            //adds even listener to each image
            image.addEventListener('click', function(){
                addMainPicture(this);
            }, false);

            images.push(image);
        }

    var imageContainer = document.getElementById("image-container");
    for(i = 0; i < images.length; i++){
        imageContainer.appendChild(images[i]);
    }
    //add main picture
    var temp = new Image();
    temp.src = urls[0];
    temp.className = "slider-images";
    var tempMainImage = scaleImage(temp,350,350);
    console.log(tempMainImage);        
    addMainPicture(tempMainImage);
  }

/*
Adds the Main Picture. In here you can set the size you want the image
to be, and other styling for the image. Takes in the url for the image.
*/
function addMainPicture(image){
    var mainPicture = document.getElementById("main-picture");
    mainPicture.src = image.src;
    //add styles
    mainPicture.style.display = "block";
    mainPicture.style.margin = "0px auto";
}

/*
Scales the image taken in to the maxWidth, and maxHeight
stated.Only scales down. Not up.
*/
function scaleImage(img, maxW, maxH){
    var maxWidth = maxW,
        maxHeight = maxH,
        ratio = 0,
        imgWidth = img.width,
        imgHeight = img.height;

    //check width
    if(imgWidth > maxWidth){
      ratio = maxWidth / imgWidth;
      img.width = maxWidth;
      img.height = imgHeight * ratio;
      imgHeight = imgHeight * ratio;
      imgWidth = imgWidth * ratio;
    }

    //check height
    if(imgHeight > maxHeight){
      ratio = maxHeight / imgHeight;
      img.height = maxHeight;
      img.width = maxWidth;
      imgWidth = imgWidth * ratio;
    }
    return img;
}
/*
This runs it all.
*/
function init(){
    var urls = ["http://placehold.it/400x400","http://placehold.it/400x400/FFF000","http://placehold.it/400x400/FF0000","http://placehold.it/400x400/0000FF"];

    //load in urls for images
    loadImages(urls);

    var leftButton = document.getElementById("scroll-left"),
        rightButton = document.getElementById("scroll-right");

    leftButton.addEventListener('click', function(){

    var imageContainer = document.getElementById("image-container");
    var currentLeft = "";

    //checks for NaN
    if(imageContainer.style.left == ""){
        currentLeft = 0;
    }else{
        currentLeft = parseInt(imageContainer.style.left);
    }
    var end = currentLeft + 300;

    function frame(){
        currentLeft+=5;
        imageContainer.style.left = currentLeft+"px";

        if(currentLeft == end)
            clearInterval(id);
        }
        var id = setInterval(frame, 10);

    }, false);

    rightButton.addEventListener('click', function(){

    var imageContainer = document.getElementById("image-container");
    var currentLeft = "";
    if(imageContainer.style.left == ""){
        currentLeft = 0;
    }else{
        currentLeft = parseInt(imageContainer.style.left);
    }

    var end = currentLeft - 300;

    function frame(){
        currentLeft-=5;
        imageContainer.style.left = currentLeft+"px";

        if(currentLeft == end)
            clearInterval(id);
        }
        var id = setInterval(frame, 10);
        }, false);
    }

    return {
        init: function(){
            init();
        }
    }
}());

ImageGallery.init();

Sure I am missing something small here but would really like another set of eyes on it.

Here is the fiddle.

Answer 1

Use onLoad event for images. Because your images are not loaded and you need to load images first to scale them:-

tempImage.onload = function(){
    scaleImage(this, 100,100);//here your scale code goes
}

Answer 2

You need to run ImageGallery.init(); once the document has loaded, with jQuery you would use:

$(function() {
    ImageGallery.init();
});

Without jQuery, you can use

<body onload="ImageGallery.init();">