HTML + jquery 有时图像无法完全显示答案

【问题标题】：HTML + jquery sometimes image not display completelyHTML + jquery 有时图像无法完全显示
【发布时间】：2016-01-04 12:21:01
【问题描述】：

我正在使用 jquery mobile 的 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 设置背景图像，但没有运气。任何建议。

【问题讨论】：

标签： jquery html cordova jquery-mobile

【解决方案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>

【讨论】：

【解决方案2】：

更新组件：

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

查看文档：https://api.jquerymobile.com/updatelayout/

【讨论】：