CODEWITHSUNDEEP
javascriptjquery
FlorianB
FlorianB

Reputation: 189

Get images width on .load() doesn't work on all browsers except firefox

I post my question here because I haven't find an answer to my issue. I load some image in JavaScript. Each of them are in its own div. And I want to get the width of the 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);});

My problem is that it works fine on Firefox, but it doesn't on all other browser. Firefox return me 185 and each other return me 0.

Upvotes: 1

Views: 312

Answers (1)

Xotic750
Xotic750

Reputation: 23482

If you had a jsfiddle of your code we may be able to look more specifically at what is happening. But to the best if my knowledge the onload event works fine in all browsers that I have tried, whether using pure javascript or jquery.

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

I also have a couple of pure javascript demos on jsfiddle you can look at if you are interested.

Ok SO, here is some code to go with the links to 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

Upvotes: 1

Related Questions