Changing src attribute of image element and getting size properties

Question

I encounter a problem while performing changes on an img element via javascript:

I build a framework to cycle through different images via the arrow keys of the keyboard. I do this by loading all image urls into an array and then changing the src attribute of the img element accordingly.

So far everything works fine. But now I want to display the naturalHeight and naturalWidth of the current image. Unfortunately when I cycle through the images the sizes of the image preceeding the current image is displayed, although the element shows the correct image.

has this something to do with load order and rendering?

I would be very thankful if someone could help me on that issue.

best regards

Max

On the comments:

I simply load the images by:

imageLeft.setAttribute("src", imagesOld[rowCounter]);
imageRight.setAttribute("src", imagesNew[rowCounter]);

I have a function for updating the size information:

function updateSizeInformation() {
    var imageLeftX = $find("<%= txtXImageLeft.ClientID %>");
    var imageLeftY = $find("<%= txtYImageLeft.ClientID %>");
    var imageRightX = $find("<%= txtXImageRight.ClientID %>");
    var imageRightY = $find("<%= txtYImageRight.ClientID %>");
    var imageLeft = document.getElementById("imageLeft");
    var imageRight = document.getElementById("imageRight");

    imageLeftX.set_value(imageLeft.naturalWidth);
    imageLeftY.set_value(imageLeft.naturalHeight);
    imageRightX.set_value(imageRight.naturalWidth);
    imageRightY.set_value(imageRight.naturalHeight);
}

And a function to fit the image to the parent div:

function fitImagesToContainers() {
    var divLeft = document.getElementById("imageContainerLeft");
    var divRight = document.getElementById("imageContainerRight");
    var imageLeft = document.getElementById("imageLeft");
    var imageRight = document.getElementById("imageRight");

    if (imageLeft.naturalWidth > imageLeft.naturalHeight) {
        imageLeft.setAttribute("width", divLeft.clientWidth);
        imageLeft.setAttribute("height", divLeft.clientWidth * (imageLeft.naturalHeight / imageLeft.naturalWidth));
    } else if (imageLeft.naturalWidth < imageLeft.naturalHeight) {
        imageLeft.setAttribute("height", divLeft.clientHeight);
        imageLeft.setAttribute("width", divLeft.clientHeight * (imageLeft.naturalWidth / imageLeft.naturalHeight));
    }
}

are you adding height and width attribute to the img tag, when you update the image src, you can also update the heith width attribute also. — Gaurav Mehra, Aug 14 '15 at 11:50

score 0 · Answer 1 · edited May 23 '17 at 12:06

When you set the "src" attribute of an image element the page has not loaded, it normally instigates an asynchronous retrieval of the image file resource. After the image onload event fires the image element properties should represent that of the retrieved image, but be unpredictable before then.

If the code you provided executes synchronously it will run into the problem you report.

In Mozilla Firefox (at least) the image attributes can be that of the previous image if inspected immediately in the same script execution, because the new/next image has yet to be retrieved. Exactly what happens if the page has previously loaded the same image may be unpredictable - I found it giving correct dimension values immediately.

I tested this with standard javascript and do not wish to suggest how to program onload event handlers in jQuery . I did come across this other StackOerflow question on javascript, image onload() doesnt fire in webkit if loading same image which may be of interest.

Changing src attribute of image element and getting size properties

1 Answers1