Question

我在通过javascript对img元素执行更改时遇到问题：

我构建了一个框架，通过键盘的箭头键循环显示不同的图像。我这样做是通过将所有图像URL加载到一个数组中，然后相应地更改img元素的src属性。

到目前为止一切正常。但现在我想显示当前图像的naturalHeight和naturalWidth。不幸的是，当我循环显示图像时，显示当前图像之前的图像大小，尽管该元素显示正确的图像。

这与加载顺序和渲染有关吗？

如果有人能在这个问题上帮助我，我将非常感激。

最好的问候

最高

评论：

我只是通过以下方式加载图片：

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

我有更新尺寸信息的功能：

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);
}

一个使图像适合父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));
    }
}

Answer 1

设置＆＃34; src＆＃34;页面未加载的图像元素的属性，通常会启动图像文件资源的异步检索。在图像onload事件触发后，图像元素属性应该代表检索到的图像的属性，但在此之前是不可预测的。

如果您提供的代码同步执行，则会遇到您报告的问题。

在Mozilla Firefox（至少）中，如果在同一脚本执行中立即检查，则图像属性可以是上一图像的图像属性，因为尚未检索新/下一图像。如果页面先前加载了相同的图像，那么究竟会发生什么情况可能是不可预测的 - 我发现它立即给出了正确的尺寸值。

我使用标准的javascript测试了这个，并且不希望建议如何在jQuery中编写onload事件处理程序。我确实遇到了javascript, image onload() doesnt fire in webkit if loading same image上可能感兴趣的其他StackOerflow问题。

更改图像元素的src属性并获取大小属性

1 个答案: