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

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

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

<code class="language-javascript">(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" class="lazy" alt="jquery add image to browser cache ">',
            ajaxImage: '<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174076317789628.gif" class="lazy" alt="jquery add image to browser cache ">',
            savingImage: '<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174076317761887.gif" class="lazy" alt="jquery add image to browser cache ">'
        },

        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);</code>

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

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

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

このアプローチは、

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

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

<code class="language-javascript">// Array of image URLs
var imageArray = ['image1.jpeg', 'image2.png', 'image3.gif'];

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

よくある質問Imagesrc

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

jquery

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

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

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

javascriptのおよび

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

<code class="language-javascript">$('#myDiv').append('<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174076317883720.png" class="lazy" alt="jquery add image to browser cache ">');</code>

jqueryの

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

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

<code class="language-javascript">var img = document.createElement('img');
img.src = 'image.png';
document.getElementById('myDiv').appendChild(img);</code>

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

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

LaravelのAjaxを介した

Appending Images

<code class="language-javascript">var imagePath = 'image.png';
var altText = 'My Image';
$('#myDiv').append('<img src="'%20+%20imagePath%20+%20'" alt="' + altText + '">');</code>

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

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

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