Javascript 获取图像宽度。load()不';除了firefox,其他浏览器都不能使用
我把我的问题贴在这里,因为我还没有找到我的问题的答案。 我用JavaScript加载了一些图像。它们都在各自的div中,我想得到div的宽度Javascript 获取图像宽度。load()不';除了firefox,其他浏览器都不能使用,javascript,jquery,Javascript,Jquery,我把我的问题贴在这里,因为我还没有找到我的问题的答案。 我用JavaScript加载了一些图像。它们都在各自的div中,我想得到div的宽度 this.biggerElmts.find('img').each(function(){ var div = $('<div/>', {'class': this.divMinPic}).appendTo(divMinPics); var img = $('<img/>', { 'class': this.minPic,
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);});
this.biggerElmts.find('img').each(函数(){
var div=$('',{'class':this.divMinPic}).appendTo(divMinPics);
变量img=$('
我的问题是,它在Firefox上运行良好,但在所有其他浏览器上都不行。
Firefox返回我185,其他浏览器返回我0。如果您有一段JSFIDLE代码,我们可能可以更具体地了解正在发生的事情。但据我所知,onload事件在我尝试过的所有浏览器中都能正常工作,无论是使用纯javascript还是jquery
如果您感兴趣,我还提供了一些关于JSFIDLE的纯javascript演示
好的,下面是一些代码,用于链接到JSFIDLE
如果您有一堆JSF代码,我们可能可以更具体地了解正在发生的事情。但据我所知,onload事件在我尝试过的所有浏览器中都能正常工作,无论是使用纯javascript还是jquery
如果您感兴趣,我还提供了一些关于JSFIDLE的纯javascript演示
好的,下面是一些代码,用于链接到JSFIDLE
谢谢你的回复。没关系,我解决了!原因是我的图像和div是虚拟的。我后来在另一个函数中遇到了这种情况。因此,除了Firefox之外,所有浏览器都无法访问它们的属性。谢谢你的时间!谢谢你的回复。没关系,我解决了!原因是我的图像和div是虚拟的。我后来在另一个函数中遇到了这种情况。因此,除了Firefox之外,所有浏览器都无法访问其属性。谢谢您的时间!
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);