1

画像のあるWebページがあります。ただし、ページが開いてから数秒後に画像が読み込まれます。画像が読み込まれていない間に読み込み中のgifを表示し、2秒ごとに画像が読み込まれたかどうかを確認したい。画像が読み込まれたら、読み込み中の gif を画像に置き換えたいと思います。私は次のコードを書きました：

    <script language="javascript" type="text/javascript">
        function checkImage(src) {
            var img = new Image();
            img.onload = function () {
                // code to set the src on success
                $('#img1').attr('src', 'imageOriginal.jpg');
                $('#img1').removeAttr('width');
                clearInterval(interval);
            };
            img.onerror = function () {
                countErrors = countErrors + 1;
            };

            img.src = src; // fires off loading of image
        }
        var interval;
        var countErrors = 0;
        $(document).ready(function () {
            $('#img1').attr('width', '620px');
            interval = window.setInterval(function () { checkImage('imageOriginal.jpg?id=' + countErrors); }, 2000);
        });
    </script>

                <img borderstyle="solid" bordercolor="black" borderwidth="1px" id="img1" alt="Screenshot" style="max-width:620px;" src="loading.gif" />

うまくいくこともあれば、うまくいかないこともあります。キャッシュを防ぐために id パラメータも追加しました。ただし、画像が既に読み込まれている場合でも、読み込み中の gif が表示されます。これを解決するにはどうすればよいですか？

4

2 に答える 2

0

スピナーを含むプレースホルダーとして浮動要素を追加し、(onload ではなく) img.load で浮動 div を非表示にすることを検討してください。img.load を使用すると、ポーリングする必要がなくなります。また、フローティング div を使用すると、画像間の移行時に認識される「しゃっくり」が軽減されます。それらを重ねることで、アニメーション化されたトランジションへの扉も開かれます。

于 2013-07-11T22:12:36.830 に答える
0

jQueryがスクリプトに含まれている場合、私が見た方法の1つは、画像が実際にロードされたときにonloadイベントがトリガーされることを除いて、そこにあるものと同様に画像にonloadイベントを添付することです。このイベントで、読み込み中の画像を非表示にすることができます。読み込み中の画像を独自の別の画像にして、メインの画像が読み込まれているかどうかに応じて非表示/表示する方が理にかなっていると思います。

例：

$('#img1').load(function() {
    $('#loadingImage').hide();
    $('#img1').show();
});

間隔でこのチェックを行う必要はありません。load イベントは一度だけ添付する必要があり、画像の読み込みが完了すると確実に発生します。

于 2013-07-11T21:24:34.407 に答える