Question

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

我已经尝试将图像放在具有相对宽度的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);

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

如何强制绘制图像？

Answer 1

找到我的答案！

如@CBroe所述，将onload方法分配给setImageSize，并将放在 imageElement.src=之前。

创建图像，相对于窗口宽度的大小。插入DOM时未绘制图像

1 个答案: