javascript - 如何显示进度图标直到所选图像完全加载？

Question

我有一个使用asp.net设计的分类网站 用户可以在那里发布广告，也可以在广告中添加 5 张图片。我使用文件上传控件，一切正常。

当我保存它时，我将它们保存到两个文件夹中。

1) 完整图像

2) 缩略图

因此，当有人查看广告时，他会看到大图像，并且在下面他会看到与广告相关的其他图像(缩略图)

我这样做是为了减少页面加载时间+带宽。因此，如果用户需要查看完整图像，他必须单击缩略图。

这里我附上预览

这就是缩略图的html代码

<img src='/Images/Thumbnail/{0}' data-url='/Images/Full/{0}' id='{0}' onclick='loadFullImage(this)'/>

这是当有人单击缩略图时设置完整图像路径的脚本

    <script type="text/javascript">
    function loadFullImage(ctrl) {
        var url = ctrl.getAttribute("data-url");
        var imgFull = document.getElementById("imgFull");
        imgFull.src = url;

    }
</script>

希望您现在明白发生了什么。这工作正常。

现在的问题是(实际上我需要调整)当有人单击缩略图时，需要一段时间才能加载图像。这不是一个错误。它的加载时间。所以我想显示进度图像直到完全加载。怎么做？或者有没有办法减少这种延迟？

请注意，当有人单击缩略图时，服务器端不会发生回发事件。只有它会查找完整的图像文件夹。

Answer 1

为此使用ajax，简单地创建一个带有加载gif的div并将其设置为display:none

<div id="loading"><img src="url..." /></div>

然后 cll div 以在用户使用此函数点击 loadFullImage 函数时显示

$('loading').show();

当图像加载完成后，取消设置 div

$('loading').hide();

你的函数将是这样的

<script type="text/javascript">

    function loadFullImage(ctrl) {
        $('loading').show();
        var url = ctrl.getAttribute("data-url");
        var imgFull = document.getElementById("imgFull");
        imgFull.src = url;
        $('loading').hide();

    }
</script>