javascript - 如何用jquery加载图片？

Question

我这样做是为了加载图像并在对话框中显示图像。

<div id="image_preview" title="Client Photo Preview">
   <p><img src="" alt="client image" id="client_image_preview" /></p>
</div>

$("#client_image_preview").attr("src", imagelocation);

$('#image_preview').dialog({
    height: 'auto',
    width: 'auto',
    modal: true,
    dialogClass: 'titleless',
    buttons: { "CLOSE": function() { $(this).dialog("destroy"); } }
});

有没有办法在使用 jquery 加载图像时显示正在加载的 gif？

问候

Answer 1

在您的 img 标签中设置初始加载 gif 图像。然后使用 javascript Image 对象和 onload 事件预加载图像；当目标图像完成预加载时，将 img 标记的 src 替换为其 URI。

<div id="image_preview" title="Client Photo Preview">
   <p><img src="loading.gif" alt="client image" id="client_image_preview" /></p>
</div>

var img = new Image();
img.onload = function() {
    $("#client_image_preview").attr("src", imagelocation);
}
img.src = imagelocation;

$('#image_preview').dialog({
    height: 'auto',
    width: 'auto',
    modal: true,
    dialogClass: 'titleless',
    buttons: { "CLOSE": function() { $(this).dialog("destroy"); } }
});