0

我正在构建一个phonegap应用程序（使用jquery mobile）并尝试在我的DOM中插入一个宽度相对于window.outerWidth和高度自动的图像。

我已经尝试将图像放在具有相对宽度的 div 中，如下所示：

<div style="width:myRelativeWidth">
    <img style"width:100%; height:100%" src="somePath>
</div>

这很好用，除了在 iPhone 上它设置图像的高度（自动）太晚了。它将是正确的宽度，但在调整为正确的纵横比之前，它会在高度上拉伸到其原始大小。

为了解决这个问题，我尝试根据原始图像的大小对其进行缩放。我知道的唯一方法是通过以下函数在将图像插入 DOM 之前预加载图像并设置大小

imageElement = new Image();
imageElement.src = path;

setImageSize(widthPercentage);

function setImageSize(widthPercentage) { 
    var pageWidth = window.outerWidth;
    var pageHeight = window.outerHeight;
    var imageWidth = imageElement.width;
    var imageHeight = imageElement.height;
    var calculatedImageWidth;
    var calculatedImageHeight;
    var scaleFactor;

    if(widthPercentage) {
        calculatedImageWidth = pageWidth * (widthPercentage / 100);
        scaleFactor = calculatedImageWidth / imageWidth;
        calculatedImageHeight = imageHeight * scaleFactor;
        imageElement.width = calculatedImageWidth;
        imageElement.height = calculatedImageHeight;
    }
}

document.body.appendChild(imageElement);

但是在浏览器中测试我在加载页面时没有得到图像，但是在刷新它时我得到了它。一些谷歌搜索告诉我，我在缓存中加载图像但未绘制时遇到问题。

如何强制绘制图像？

4

1 回答 1

0

找到了我的答案！

将 onload 方法分配给setImageSize@CBroe 提到的，并将其 放在 imageElement.src=.

于 2013-05-31T13:38:57.750 回答