イメージ変更イベントが発生しているときに、どのように読み込みアイコンを表示できますか？ （jQueryなし）

Question

イメージ変更イベントが発生しているときに、どのように読み込みアイコンを表示できますか？ （jQueryなし）

私はスタックオーバーフローのコミュニティとコーディングの世界に新しいですので、 私と一緒に耐えてください。私はこのサイトとそれ以降について多くの検索を行ったが、この特定の状況に対する解決策を見つけることができなかった。

マウスオーバー時に静止画像をアニメーションGIFに変更し、マウス出力時に同じ静止画像に戻すweebly Webページ（以下の例）にいくつかのコードを追加しました。イメージの変更は適切に機能しますが、GIFがかなり大きいので、ロードするのに時間がかかります。マウスオーバーすると、イメージがロードされていることを知らされません。私は、ユーザーが画像が現在ロード中であることを知らせるためのエフェクトを追加するのに問題があります。私はオンラインで検索し、CSS読み込みアニメーションを作成するさまざまな方法を見つけたり、ページ読み込み時に単一のイメージに読み込みアイコンを追加したりするだけで、イメージの変更中に追加する方法を見つけることができません。

私が試してみました：

• CSSのイメージアニメーションローダーのようにCSSの背景画像として

• ローダーを（素晴らしい作品、それを追加する場所を把握することはできません）。静止画像は、マウスオーバーでバックグラウンドでローダーを公開する
  には消えません。

• 画像の上にローダーを含むdivを追加しても、画像要素は「ローダー」divにマウスオーバーを登録しません。

• 使うボタン、スタート/ストップなしの成功と負荷

そして、より多くのアプローチの間にそれらをアニメーション。

私はバックグラウンドでGIFプリロードを持つことができますが、 は複数の画像が存在するため、モバイルで大量のデータを食べることがあるためです。 また、画像は常に更新されるため、ローカルに保存することはオプションではありません。私はjqueryを含まないソリューションを見つけることができないようにGoogleとスタックのオーバーフローを検索した結果、私は知識が不足してjqueryを避けたいのですが、weeblyの組み込みHTMLボックスに実装するのは難しいようです。可能であれば、html、css、およびjavascriptのコンボでこの作業を達成したいと考えています。

以下は、私が以下で作業しているコードの例です。このコードはWeeblyのWebページに埋め込まれたhtmlボックスに置かれます。 jqueryを使わずに画像の変更に読み込みアイコンを追加する方が良い場合は、コードを完全に破棄します。

<img id="pleasework" 
src="STILL IMAGE URL HERE" 
class="picswap" 
alt="not working" 

onmouseover="document.getElementById('pleasework') 
.src='GIF IMAGE URL HERE'" 

onmouseout="document.getElementById('pleasework') 
.src='STILL IMAGE URL HERE'" 
/> 

基本的に私はちょうどロードアイコンまたは静止およびGIF画像と同等の効果のようなものでこっそりしたいと思います。それは簡単な修正かもしれませんが、私はそれを理解することはできません。私がこの特定の仕事にどれくらいの時間を費やしたかを伝えることは、ほとんど恥ずかしいでしょう。ちょっとだけ、この場所に行くべき方向性が必要です。

P.S.これはスタックオーバーフローに関する私の最初の投稿ですので、私の質問が不適切に提起された場合、または私が何か不足している場合にお知らせください。御時間ありがとうございます。

Answer 1

これを行う簡単な方法の1つは、jQueryを式から外して、スワップするイメージの上にローダーアイコンを含むdivを配置し、CSSの表示属性をnoneにすることです。

<div>&nbsp;<img src="someloader.gif" id="ourLoaderGif" style="display: none;" /></div> 

これで、小さなバニラJSとsetTimeoutを使用して、イメージからローダーへのこの移行を可能にすることができました。上のnbspは、ローダが隠されたときにdivの折りたたみを止めます。それがなければ、ローダーの表示を切り替えると、あなたのレイアウトは流動的ではなく不安定に見えます。

function imageOnMouseEnter() { 
    //How long to show the loader for in ms (eg enough time on average for your image to change) 
    var imageLoadTime = 1000; 

    //Show the loader 
    document.getElementById('ourLoaderGif').style.display = ''; 

    //Change the original image src 
    document.getElementById('pleasework').src = 'IMAGE-URL-HERE.png'; 

    //Set the timeout on the spinner 
    setTimeout('hideLoader()', imageLoadTime); 
} 

function hideLoader() { 
    document.getElementById('ourLoaderGif').style.display = 'none'; 
} 

ザ・バックこのソリューションに描き、現在私たちが実際の画像の変化からではなく動的な時間の私達の時間間隔のための静的変数を使用している場合にのみ、非常に少なくとも、これが正しい方向にあなたを指している必要があります！