1

Webページのonload（）イベントのコードを記述しようとしています。このコードでは、すべての画像がWebページに読み込まれるまでWebページが表示されるのを待ちます。私はこれを見つけました：

すべての画像をロードするためのonLoadイベント

しかし、それは期待どおりに正確に機能しないか、それを使用する方法を知らないのは私です...。

それで、これはonloadイベントを使用してすべての画像が読み込まれるのを待つための最良の方法ですか、それとも別の画像をお勧めしますか？

このWebサイトに画像をプリロードしたい：リンク。地図の画像が大きいので、正しい画像よりも長持ちします。ただし、透明な画像であるため、小さくすることはできません。そこで、完全なWebページを表示した後、すべての画像をプリロードすることにしました。しかし、それでもできませんでした...何か考えはありますか？

4

5 に答える 5

2

私があなたを正しく理解した場合、これは私がそれを行う方法です：

1）まず、「loading div」を追加して、htmlコンテンツを非表示にし、すべての画像が読み込まれたときにそのdivを削除します。読み込みメッセージや読み込みインジケーターを表示する方がエレガントであるだけでなく、画像の後に実際にページを読み込むよりも簡単です。これは、画像が完成した後にコンテンツを動的に作成してロードすることを意味し、さらにいくつかの作業を行う必要があります。

2）次に、すべての画像を選択し、onloadイベントに単純な関数を追加して、読み込まれた画像の数を増やし、すべての画像が読み込まれたかどうかを確認する関数を呼び出します。すべての画像が読み込まれたら、読み込み中のdivを削除します。これですべてです。

以下にいくつかの実用的なコードを示します（画像を除いて、自分で追加する必要があります）。基本的に、画像を含むdivの代わりに、独自のhtmlコードを用意し、前後に（ただし、前の方が良い）、「loading div」を追加する必要があります（私のcssスタイルは適切ではないことに注意してください）

<!doctype html>
<html>
<head>
<script>
window.onload = function() {

    var images = document.getElementsByTagName('img'),
        totalImages = images.length,
        imagesLoaded = 0,
        img;


    function checkForLoaded() {

        if(imagesLoaded === totalImages) {
            var loadingDiv = document.getElementById('loadingDiv');
            loadingDiv.parentNode.removeChild(loadingDiv);
        }
    }


    for (var i = 0; i < totalImages; i++) {
        img = new Image();

        img.onload = function () {

            imagesLoaded++;
            checkForLoaded();
        }

        img.src = images[i].src;

    }
}

</script>
</head>
<body>

    <div id="content">
        <img src="0001.jpg">
        <img src="0002.jpg">
        <img src="0003.jpg">
        <img src="0004.jpg">
        <img src="0005.jpg">
        <img src="0006.jpg">
        <img src="0007.jpg">
        <img src="0008.jpg">
        <img src="0009.jpg">
        <img src="0010.jpg">
    </div>

    <div id="loadingDiv" style="height:2000px; width: 2000px; position: absolute; top: 0px; left: 0px; background-color: #FFFFFF">
        loading
    </div>
</body>
</html>
于 2012-10-22T15:16:16.410 に答える
0

どのような結果が必要かわかりませんが、タグを読み込む前に特定の画像を読み込む<body>場合は、JavaScriptを使用できます。

<script type="text/javascript">
var image1=new Image()
image1.src="pathway to image"
var image2=new Image()
image2.src="pathway to image"
</script>

このJSを<head>タグに入れると、それらの画像が本文の前に読み込まれます。通常のHTMLタグの代わりに、変数（この例ではimage1および）を使用するだけです。image2<img>

于 2012-10-22T14:34:50.783 に答える
0

loadinghtmlやbody要素などに特定のクラスを追加するように設定しonload、すべての画像を読み込むイベント/ jQueryを使用して関数をフックし、画像が読み込まれたらloading、html/bodyからクラスを削除してみます。エレメント。

次に、CSSを追加してページのコンテンツ全体を非表示にし、代わりに、読み込みクラスが存在する場合に備えて読み込みプレースホルダーを表示します。ユーザーがjavascriptを有効にしている場合にのみ、このクラスを追加するように注意する必要があります。Modernizrによって追加されたandクラスはjs、これを行うのに役立ちます。または、当然、javascriptを使用してクラスを追加するだけです。no-jsloading

実際のプリロードに関しては、これとこれは、画像のプリロードを処理する2つの非常に広範なスレッドです。

于 2012-10-22T14:35:03.257 に答える
0

$（document）.ready（）の代わりに$（window）.load（）を使用する必要があります

于 2012-10-22T14:39:11.667 に答える
-1

ドキュメントのloadイベントでJqueryを使用することを検討してください。詳細はこちらドキュメントロードイベントと準備完了

于 2012-10-22T14:27:28.190 に答える