javascript - 在 .load() 上获取图像宽度不适用于除 Firefox 之外的所有浏览器

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