如何使用jquery加载图像?

时间:2011-07-13 16:17:35

标签: javascript jquery html css

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

<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?

此致

1 个答案:

答案 0 :(得分:8)

img标记中设置初始加载gif图片。然后使用javascript Image对象和onload事件预加载图片;当目标图像完成预加载时,将src标记的img替换为其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"); } }
});