如何在所选图像完全加载之前显示进度图标？答案

【问题标题】：How to display a progress icon untill selected image is fully loaded?如何在所选图像完全加载之前显示进度图标？
【发布时间】：2017-05-26 04:42:55
【问题描述】：

我有一个使用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>

希望您现在了解正在发生的事情。这工作正常。

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

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

【问题讨论】：

标签： javascript jquery html asp.net image

【解决方案1】：

为此使用ajax，只需创建一个加载gif的div并将其设置为display:none

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

然后关闭 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>

【讨论】：

Bilal，你能用我的函数更新答案吗？把那些绳子放在哪里？ :) 谢谢
使用'$('loading').show();'在第一行调用你的函数并在函数结束时调用这一行'$('loading').hide();'并显示带有加载图像的 div，您希望在其中显示加载图像

【解决方案2】：

尝试异步加载图片，例如用 jQuery。这已经回答过，应该在这里帮助你。基本思想是启动异步请求并显示加载图标。触发完成事件后，移除加载图标，因为图像像素应该已完全加载。

https://stackoverflow.com/a/4285068/1143300

【讨论】：

【解决方案3】：

@Bilal 回答正确！

但我会换一条线！

类似这样的：

    if ( $('#imgFull').load() ) {
      $('loading').hide();
    }

我总是在图像完全加载时使用方法 LOAD 来隐藏“加载块”。

【讨论】：