1

与えられたhtml構造：

<div class="image-container">
    <img id="firstslide" src="img/verybig.jpg">
</div>

簡単で簡単なチェック方法があるのだろうか

  1. 画像が現在読み込まれている場合は、読み込みアイコンをdivに挿入します。
  2. 読み込みが完了し、完全に読み込まれた画像が表示されます

それに関するヒントはありますか？

4

5 に答える 5

3

選択した画像の背景としてローダーアニメーション画像を設定するので、CSSからそれを行います。

CSS：

img.loader {
  background: url(loader.gif) 50% 50% no-repeat;
}

HTML：

<div class="image-container">
  <img id="firstslide" class="loader" style="width: 100px; height: 100px;" src="img/verybig.jpg" alt=""/>
</div>
于 2012-04-16T20:01:05.380 に答える
2

jsFiddle： http: //jsfiddle.net/FjfvZ/60/

jQueryを使用している場合：

<div id="loading">Loading</div>
<img id="image" src="image.png" style="display:none"/>

<script>
    $('#image').load(function()
    {
        $('#loading').hide();
        $(this).show();
    });
</script>
于 2012-04-16T20:02:47.863 に答える
1

私は画像プリローダープラグインを使用しています：

http://www.farinspace.com/jquery-image-preload-plugin/

これにより、やりたいことを何でもできるようになります。

于 2012-04-16T19:59:03.537 に答える
1

小さな読み込み画像を背景画像として使用できます。背景画像は、読み込みが完了すると実際の画像で覆われます。

これがjsFiddleの例です。

于 2012-04-16T19:59:46.393 に答える
0

これは、単純で優れたソリューションを提供します。

http://www.appelsiini.net/projects/lazyload

于 2012-04-16T20:00:21.973 に答える