Question

我在这里发布我的问题是因为我找不到问题的答案。我在JavaScript中加载了一些图像。他们每个人都在自己的div。我想得到div的宽度。

this.biggerElmts.find('img').each(function(){
var div = $('<div/>', {'class': this.divMinPic}).appendTo(divMinPics);
var img = $('<img/>', {
    'class': this.minPic,
    alt:'Miniature '+$(this).attr("alt"),
    src:this.urlPic($(this).attr("src"), this.minPicFolder)
})  // if image not found, we put de default file
    .error(function(){console.log("error loading image");$(this).attr("src", this.minPicFolder + this.defaultMinPic);})
    .load(function(){
        console.info($(this).width());
    })
    .appendTo(div);});

我的问题是它在Firefox上运行良好，但它并不适用于所有其他浏览器。 Firefox返回185并且彼此返回0。

Answer 1

如果你有一个jsfiddle的代码，我们可以更具体地看看发生了什么。但是，如果我的知识，onload事件在我尝试的所有浏览器中都能正常工作，无论是使用纯javascript还是jquery，都是最好的。

Here is another thread where jquery was used to do just what you are asking about.

如果你感兴趣的话，我还可以在jsfiddle上看一些纯粹的javascript演示。

好的，这里有一些代码可以链接到jsfiddle

var display = document.getElementById("display"),
    images = {
        "F12berlinetta": "http://www.ferrari.com/Site_Collection_Image_115x55/f12_thumb_home_115x55.png",
            "458 Spider": "http://www.ferrari.com/Site_Collection_Image_115x55/110823_458_spider_menu.png",
            "FF": "http://www.ferrari.com/Site_Collection_Image_115x55/ff_thumb_home_115x55.png",
            "458 Italia": "http://www.ferrari.com/Site_Collection_Image_115x55/458_italia_menu_1_dx_ok.png",
            "Ferrari California": "http://www.ferrari.com/Site_Collection_Image_115x55/california_menu_3_sx.png"
    },
    keys = Object.keys(images),
    loaded = 0,
    menuWidth = 0,
    noWaitWidth = 0;

function clickedIt(evt) {
    alert("You chose the " + evt.target.title);
}

function onLoaded(evt) {
    loaded += 1;
    menuWidth += evt.target.offsetWidth;
    evt.target.addEventListener("click", clickedIt, false);
    if (loaded === keys.length) {
        console.log("Waited load width", menuWidth);
    }
}

keys.forEach(function (key, index) {
    var newDiv = document.createElement("div"),
        newImg = document.createElement("img");

    newImg.id = "thumb" + index;
    newImg.src = images[key];
    noWaitWidth += newImg.offsetWidth;
    newImg.title = key;
    newImg.addEventListener("load", onLoaded, false);

    newDiv.appendChild(newImg);
    display.appendChild(newDiv);
});

console.log("Didn't wait load width", noWaitWidth);

Demo 1
Demo 2

在.load（）上获取图像宽度不适用于除firefox之外的所有浏览器

1 个答案: