0

私はJQueryで画像をプリロードすることを調べていて、このPreloading images with jQueryに出くわしました

プリロードされた画像を何らかの方法で呼び出す必要がありますか? 私はこれがimgを作成し、ブラウザが（少なくともそのページに対して）それをキャッシュしていると仮定し、プリロードされた画像をそのURIで使用するだけですか？

誰かがここで明確にできますか？

4

4 に答える 4

4

画像のプリロードは、JavaScript の単純な行で実行できます。

new Image().src='image.png';

JavaScript ファイルをプリロードするには、JavaScript のinclude_DOM手法を使用して、新しい

<script>タグ、次のように:

var js = document.createElement('script'); js.src = 'mysftuff.js'; 
document.getElementsByTagName('head')[0].appendChild(js);

CSSのバージョンは次のとおりです。

var css  = document.createElement('link');
css.href = 'mystyle.css';
css.rel  = 'stylesheet';
document.getElementsByTagName('head')[0].appendChild(css);

最初の例では、画像がリクエストされましたが使用されていないため、現在のページには影響しません。2 番目の例では、スクリプトがページに追加されるため、ダウンロードされるだけでなく、解析されて実行されます。同じことが CSS にも当てはまります — それもページに適用されます。これが望ましくない場合でも、XMLHttpRequest を使用してアセットをプリロードできます。

「ウェブサイトを超高速にする」に関する完全なチュートリアルについては、私が多くのウェブサイトやブログから厳選した次のリンクにアクセスしてください。

jQuery による画像のプリロード

于 2011-12-14T13:13:00.463 に答える
0

CSS のみを使用して多くのプリロードを行います。ライブラリが最初にロードされるのを待つ必要があるため、jQuery バージョンは好きではありません。JS が有効になっていない場合、または jQuery が遅延している場合、ロールオーバー時に画像の変更に顕著な遅延が発生します。

画像のプリロードが完了したときにコールバックが必要な場合は、JS/jQuery を使用してください。それ以外の場合は、CSS を使用してください。

これは を使用する 1 つの方法にすぎ:beforeないため、ブラウザーのサポートには制限があります (< IE8)。これの良いところは、追加の HTML マークアップが必要ないことです。

HTML

<div class="logo"></div>

CSS

.logo {
    background:url(logo-1.png);
}

.logo:before {
    content: url(logo-2.png);
    width: 0;
    height: 0;
    visibility: hidden;
}

もう 1 つの方法は、プリロードする必要がある画像を使用して、背景画像をページの非表示の要素に設定することです。

HTML

<div id="preload-logo-2"></div>

CSS

#preload-logo-2 {
    background: url(logo-2.png);
    height: 0;
    width: 0;
    visibility: hidden;
}
于 2015-03-01T00:25:15.773 に答える
0

以下を使用して、すべての画像をプリロードできます。

function loadImages(){
    var images = [
        'http://cdn.yourdomain.com/img/image1.png',
        'http://cdn.yourdomain.com/img/image2.jpg',
        'http://cdn.yourdomain.com/img/image3.jpg',
        'http://cdn.yourdomain.com/img/image4.jpg'
    ];
    $(images).each(function() {
        var image = $('<img />').attr('src', this);
    });
}
于 2012-09-09T20:12:50.603 に答える
0

サーバーが正しいキャッシュ ヘッダーを設定していれば、画像はキャッシュされ、URL を使用するだけで画像をすぐに取得できるはずです。

于 2011-12-14T12:53:07.780 に答える