Javascript 加载图像时显示加载 gif

Show loading gif while image is loading

提问by PirateSoul

I made some code where the user can upload some images from a zip. On the next page I need to show all the images seperatly in a 85*85 px frame.

我制作了一些代码，用户可以在其中从 zip 上传一些图像。在下一页上，我需要在 85*85 像素的框架中单独显示所有图像。

The problem is that it may take some time for all the images to load. So I want to show a loading gif while the user waits for the image to load.

问题是加载所有图像可能需要一些时间。所以我想在用户等待图像加载时显示加载 gif。

I've set the src of the images to be the loading gifs, while I created some checkboxes with the real source as id

我已将图像的 src 设置为the loading gifs，同时我创建了一些复选框，其中真实来源为 id

echo "<td><img src=\"beelden/ajax-loader-black-16.png\" id=\"img".$image."\" style=\" width: 85px; height: 85px; border: 1px solid gray; background-color: #fff; padding: 10px;\">";
echo "<input type=\"checkbox\" id=\"img[".$image."]\" name=\"check_image[]\" value=\"".$filename."\" /></td>";
<input type="hidden" name="aantal" id="aantal" value="<?=$image?>" >

Then I created some javascript to check if the image is loaded, and when it is, it is supposed to replace the source of the image.

然后我创建了一些 javascript 来检查图像是否已加载，当加载时，它应该替换图像的来源。

<script>
    var aantal = document.getElementById("aantal").value;
    for(var i = 0; i < aantal; i++){
        var source = document.getElementById("img["+i+"]").value;
        var img = new Image();
        img.onload = function(){
            $("#img"+i).attr('src', source);
        }();
        img.src = source;
    }
</script>

But this does not work the way I expected, I think it fires for all of the images as soon as the first one is loaded. Any ideas what I am doing wrong or how to fix this?

但这并不像我预期的那样工作，我认为它会在加载第一个图像后立即触发所有图像。任何想法我做错了什么或如何解决这个问题？

回答by Tiberiu C.

You can set the background of an image to the loading gif. It is a simple css trick. You wouldn't need then to make a js script.

您可以将图像的背景设置为加载 gif。这是一个简单的css技巧。你不需要那么做一个js脚本。

.loading {
  background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat;
}

<img class="loading" src="http://placehold.it/106&text=1" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=2" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=3" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=4" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=5" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=6" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=7" width="106px" height="106px" />

Update :

更新 ：

In case you have transparent images then the story becames a bit more complicated but, still can be done with css and some div elements.

如果你有透明的图像，那么故事会变得有点复杂，但仍然可以用 css 和一些 div 元素来完成。

.image-wrapper {
  overflow: hidden;
  width: 106px;
  height: 106px;
  display: inline-block;
}

.image-wrapper img {
  float: left;
  display: block;
  opacity: 0.2; /* simulating a semitransparent image */
}

.image-wrapper:after, .loading {
  content: ' ';
  background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif')  center no-repeat ;
  background-size : auto 100%;
  width: 106px;
  height: 106px;
  float: left;
  display: block;
}

<div class="image-wrapper">
  <!-- simulates a hard loading image -->
  <img src="http://placehold.it/not-existing" alt="" />
</div>
<div class="image-wrapper">
  <img src="http://placehold.it/106x106&text=2" alt="" />
</div>
<div class="image-wrapper">
  <img src="http://placehold.it/106x106&text=3" alt="" />
</div>
<div class="image-wrapper">
  <img src="http://placehold.it/106x106&text=4" alt="" />
</div>
<div class="image-wrapper">
  <img src="http://placehold.it/106x106&text=5"  alt="" />
</div>
<div class="image-wrapper">
  <img src="http://placehold.it/106x106&text=6"  alt="" />
</div>
<div class="image-wrapper">
  <img src="http://placehold.it/106x106&text=7"  alt="" />
</div>

Unfortunately the browser adds a broken icon or a ?while loading, this is why the image contains an empty alt;

不幸的是浏览器添加了一个损坏的图标或?加载时，这就是为什么图像包含一个空的alt;

Update 2 :

更新2：

The second variant relies very much on the image size, if you have difrent sizes than the loading gif won't be pushed away properly, as an alternative would be to use the first variant and a little js script that will remove the background as soon as the image is loaded:

第二个变体在很大程度上依赖于图像大小，如果您有不同的大小，则加载 gif 将不会被正确推开，作为替代方法是使用第一个变体和一个小的 js 脚本，它将尽快删除背景加载图像时：

$('img').load(function(){
   $(this).css('background','none');
});

   .loading {
      background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="loading" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="106px" height="106px" />
    <img class="loading" src="http://placehold.it/106&text=2" width="106px" height="106px" />
    <img class="loading" src="http://placehold.it/106&text=3" width="106px" height="106px" />
    <img class="loading" src="http://placehold.it/106&text=4" width="106px" height="106px" />
    <img class="loading" src="http://placehold.it/106&text=5" width="106px" height="106px" />
    <img class="loading" src="http://placehold.it/106&text=6" width="106px" height="106px" />
    <img class="loading" src="http://placehold.it/106&text=7" width="106px" height="106px" />

回答by rohan thakur

Angular 8 Solution with Hostlistener and Hostbinding.

带有 Hostlistener 和 Hostbinding 的 Angular 8 解决方案。

1. Create a simple attribute directive

1. 创建一个简单的属性指令

@Input('src') imageSrc;

@Hostlistener('load') loadImage(){
this.srcAttr=this.imageSrc;}

@HostBinding('attr.src') srcAttr="../../loader.svg";

Basically we set the initial image source to the loader image. Once the image loads(load event triggered), we listen to it and set the image source to the actual image.

基本上我们将初始图像源设置为加载器图像。一旦图像加载（加载事件触发），我们监听它并将图像源设置为实际图像。

2. Now use the just need to use the created attributes on your images.

2. 现在使用只需要在您的图像上使用创建的属性。

<img imgLoader src='image.jpg'>

Using svg requires no styling changes, gif may require css changes.

使用 svg 不需要更改样式，gif 可能需要更改 css。

You can visit the websitefor working implementation.

您可以访问网站进行工作实施。