Question

所以我相信我在这里错过了一些小事。我前一段时间写过这篇文章，但是前几天我回过头来试着想起为什么我不再努力了。然后我意识到这是因为当您第一次加载页面时，它不会调整图像库容器中的图像大小。

然后在页面刷新时，图像按照预期的方式自行调整大小。这是代码。

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

当然，我在这里错过了一些小东西，但是真的想要另外一双眼睛。

这是fiddle。

Answer 1

对图像使用onLoad事件。由于您的图像未加载，您需要先加载图像以缩放它们： -

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

Answer 2

您需要在文档加载后运行ImageGallery.init();，使用jQuery：

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

没有jQuery，你可以使用

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

JS OnLoad图像未调整大小

2 个答案: