如何显示进度图标，直到所选图像满载？

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>

Answer 2

尝试异步加载图片，例如用jQuery。这已经得到了回答，应该在这里帮到你。 基本思路是启动异步请求并显示加载图标。触发完整事件后，删除加载图标，因为图像像素应该已满载。

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

Answer 3

@Bilal回答正确！

但我会换一条线！

这样的事情：

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

我总是使用方法负载来隐藏“加载块”＆＃39;就在图像被完全加载时。