HTML + jquery有时图像不能完全显示

Question

我正在使用jquery mobile for UI进行cordova项目。

我需要显示用户图片网格。图像正在syc中下载。方式（使用回调）并在下载成功后显示图像。

有时图像无法正常显示。

下载成功后，我使用以下代码： -

 image.src = Imageurl;
image.onload = function () {

    $(divID).empty().append(image);
    $(divID).find("img").attr("src",Imageurl);
};

也尝试了

  $(divID).find("img").attr("src",Imageurl);

和 尝试使用CSS设置背景图像，但没有运气。任何建议。

Answer 1

您可以预加载图片。加载完成后，页面会显示一个按钮，允许您仅使用图像文件名在图像标记中使用预加载的图像

JSFIDDLE

var my_img2 = new Image();

// notify the user that the image has been preloaded, and reveal the
// button to use the preloaded image
function notify()
{
    document.getElementById('preloadbut2').style.display = 'none';

    document.getElementById('after_preload').style.display = 'block';
}

function preload()
{
    my_img2.onload = notify;

    my_img2.src = 'someimage.jpg';
}

// using only the file name, we can take advantage of the preloaded image
function use_preloaded_image()
{
    document.getElementById('saturnplaceholder').src = 'someimage.jpg';
}
</script>
<input type="button" 
    id="preloadbutton2" 
    value="Preload Image" 
    onclick="preload();this.value='Loading. Please wait...'" />

<div id="after_preload" style="display: none">
<input type="button" value="Use Preloaded Image"
onclick="use_preloaded_image()" /><br />
<img src="blank.jpg" id="saturnplaceholder" width="500" />
</div>

Answer 2

更新组件：

$('#your_selector').trigger('updatelayout');

请参阅文档：https://api.jquerymobile.com/updatelayout/