jQueryブラウザキャッシュに画像を追加します

このガイドは、jQueryを使用して画像をブラウザキャッシュにプリロードする方法を示しており、負荷時間を短縮することでウェブサイトのパフォーマンスを向上させます。 画像は、DOM内の隠されたDIV要素に追加されます。

このコードは、ID「IMG-Cache」を使用して隠された

(function($,D,W) {

    var JQUERY4U = {};

    JQUERY4U.UTIL = {

        images:
        {
            loadingImage: '<img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174076317693190.gif?x-oss-process=image/resize,p_40"  class="lazy" alt="jquery add image to browser cache " /></img>',
            ajaxImage: '<img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174076317789628.gif?x-oss-process=image/resize,p_40"  class="lazy" alt="jquery add image to browser cache " /></img>',
            savingImage: '<img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174076317761887.gif?x-oss-process=image/resize,p_40"  class="lazy" alt="jquery add image to browser cache " /></img>'
        },

        preloadImages: function()
        {
            $('body').append('<div id="img-cache" style="display:none"></div>');
            $.each(JQUERY4U.UTIL.images, function(i,v)
            {
                $('#img-cache').append(v);
            });
        }

    }

    $(D).ready(function($) {
        JQUERY4U.UTIL.preloadImages(); 
    });

})(jQuery,document,window);

を作成し、画像要素を追加します。

ループはdivオブジェクトを介して反復し、各画像をキャッシュに追加します。 $.eachimages代替アプローチ：

隠されたdivなしで画像をプリロードするためのより簡単な方法：

このアプローチは、

オブジェクトを直接作成し、

属性を割り当てます。 ブラウザは、これらの画像をDOMに追加する必要なく、これらの画像をフェッチおよびキャッシュします。

// Array of image URLs
var imageArray = ['image1.jpeg', 'image2.png', 'image3.gif'];

// Preload images
$.each(imageArray, function(index, src) {
  new Image().src = src;
});

よくある質問Imagesrc

このセクションは、jQueryを使用してWebページに画像を追加することに関する一般的な質問に答えます。

jquery

を使用してdivに画像を追加します

メソッドを使用して、divに画像を追加します：

JavaScriptを使用して画像を読み込んでAppending画像をロードしてAppending画像を使用しています

javascriptのおよび

メソッドは同じ結果を達成します：append()

$('#myDiv').append('<img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174076317883720.png?x-oss-process=image/resize,p_40"  class="lazy" alt="jquery add image to browser cache " />');

jqueryの

を使用して画像を動的に追加します

変数を使用して画像を動的に追加します：createElement() appendChild() AjaxおよびjQuery

var img = document.createElement('img');
img.src = 'image.png';
document.getElementById('myDiv').appendChild(img);

を介した可変IDを使用した

Appending画像 append()ajaxは、動的な画像の読み込みとアプリを許可します：

LaravelのAjaxを介した

Appending Images

var imagePath = 'image.png';
var altText = 'My Image';
$('#myDiv').append('<img src="' + imagePath + '" alt="' + altText + '">');

Laravelで、Ajax Successコールバック内の

ヘルパーを使用してください：

以上がjQueryブラウザキャッシュに画像を追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。