1

我在这里发布我的问题，因为我没有找到我的问题的答案。我在 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。

4

1 回答 1

1

如果您有代码的 jsfiddle，我们可能能够更具体地查看正在发生的事情。但据我所知，无论是使用纯 javascript 还是 jquery，onload 事件在我尝试过的所有浏览器中都可以正常工作。

这是另一个线程，其中 jquery 用于执行您所要求的操作。

我还有几个关于 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);

演示 1
演示 2

于 2013-04-22T13:10:08.470 回答