加載圖像時顯示加載 gif

Question

我制作了一些代碼，用戶可以在其中從 zip 上傳一些圖像。 在下一頁上，我需要在 85*85 像素的框架中單獨顯示所有圖像。

問題是加載所有圖像可能需要一些時間。 所以我想在用戶等待圖像加載時顯示加載 gif。

我已將圖像的 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?>" >

然后我創建了一些 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>

但這並不像我預期的那樣工作，我認為它會在加載第一個圖像后立即觸發所有圖像。 任何想法我做錯了什么或如何解決這個問題？

Answer 1

您可以將圖像的背景設置為加載 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" />

更新 ：

如果你有透明的圖像，那么故事會變得有點復雜，但仍然可以用 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>

不幸的是，瀏覽器添加了一個損壞的圖標或? 加載時，這就是圖像包含空alt ；

更新2：

第二個變體在很大程度上依賴於圖像大小，如果您有不同的大小，則加載 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" />

Answer 2

帶有 Hostlistener 和 Hostbinding 的 Angular 8 解決方案。

1. 創建一個簡單的屬性指令

import { Directive, HostListener, Input, HostBinding } from '@angular/core';
@Directive({selector: '[imageLoader]'})
export class ImageLoaderDirective
{
  @Input('src') imageSrc;
  @HostListener('load')
  loadImage()
  {
  this.srcAttr=this.imageSrc;
  }

@HostBinding('attr.src') srcAttr="../../assets/pics/Loader.svg"
constructor() { }
}

基本上我們將初始圖像源設置為加載器圖像。 一旦圖像加載（加載事件觸發），我們監聽它並將圖像源設置為實際圖像。

2. 現在使用只需要在您的圖像上使用創建的屬性。

<img imageLoader src='image.jpg'>

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

您可以訪問網站進行工作實施。