2

css 背景画像のプリローダーを機能させるのに問題があります。状況は次のとおりです。いくつかの隠し要素があり、それぞれに css 背景画像があります。

ユーザーが「開始」ボタンをクリックすると、jquery を使用して要素を表示します (1 つが表示されると、もう 1 つが非表示になります)。ただし、「開始」ボタンは、すべての画像がロードされた後にのみ使用可能にする必要があります。

私はこのプリローダーを使用しています：

function preloadimages(arr) {
    var newimages=[], loadedimages=0
    var postaction=function(){}
    var arr=(typeof arr!="object")? [arr] : arr

    function imageloadpost() {
        loadedimages++
        if (loadedimages == arr.length) {
            postaction(newimages) //call postaction and pass in newimages array as parameter
        }
    }

    for (var i=0; i<arr.length; i++) {
        newimages[i] = new Image()
        newimages[i].src = arr[i]
        newimages[i].onload = function() {
            imageloadpost()
        }

        newimages[i].onerror = function() {
             imageloadpost()
        }
    }

    return { //return blank object with done() method
        done:function(f) {
            postaction = f || postaction //remember user defined callback functions to be called when images load
        }
    }
}

preloadimages('img01','img02','img03')
    .done(function(images) {
        alert(images.length + " images loaded"); 
    });

ただし、これは 1 つのイメージのみをロードします。

他のコードもいくつか試しましたが、結果はありませんでした。画像プリローダーは実際に css バックグラウンド画像で動作する必要がありますか? それともタグ専用ですか？

4

2 に答える 2

5

背景画像をプリロードするための本当に素晴らしい純粋な CSS ソリューションがあり、それが役立つと思います。その背後にある概念は、ページの読み込み時に読み込まれるが表示されない疑似要素に背景画像を配置することです。これにより、ブラウザは画像をロードし、後で別の要素によって呼び出されたときに準備が整うようにします。サンプルコードは次のとおりです。

.main-element {
    background-image: url(your_url_here);
}
.main-element:after {
    display: none;
    content: url(your_url_here), url(another_url_here), url(another_url_here), etc.
}
.hidden-element {
    display: none;
    background-image: url(your_url_here);
}
.main-element:hover {
    .hidden-element: display: block;
}

この手法の詳細が記載された記事へのリンクは次のとおりです: http://www.thecssninja.com/css/even-better-image-preloading-with-css2

于 2013-02-03T10:38:39.407 に答える
0

私はそれを働かせました！これは非常に単純な jquery ソリューションです。

$(".hidden-element").show(); $(".hidden-element").hide();

これはユーザーによって検出されず、ブラウザに画像のロードを強制しているようです。ロードが完了した後もコールバックを使用できませんが、これはレーティスで機能します

于 2013-02-03T13:42:12.037 に答える