jquery - HTML + jquery 有时图片显示不全

Question

我正在为 UI 使用 jquery mobile 开发 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>