jQuery tambah gambar ke cache penyemak imbas

Panduan ini menunjukkan bagaimana untuk memprediksi imej ke dalam cache penyemak imbas menggunakan jQuery, meningkatkan prestasi laman web dengan mengurangkan masa beban. Imej -imej itu ditambah kepada elemen div tersembunyi di dalam dom.

<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>

Kod ini mencipta div tersembunyi dengan id "img-cache" dan menambah elemen imej kepadanya. Gelung $.each melangkah melalui objek images, menambah setiap imej ke cache.

Pendekatan alternatif:

kaedah yang lebih mudah untuk imej pramuat tanpa div tersembunyi:

<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>

Pendekatan ini secara langsung mencipta Image objek, memberikan atribut src. Penyemak imbas kemudian akan mengambil dan cache imej -imej ini tanpa perlu menambahkannya ke dom.

Soalan -soalan yang sering ditanya

Bahagian ini menjawab soalan umum mengenai menambah imej ke laman web menggunakan jQuery.

Menambah imej ke Div dengan jQuery

Gunakan kaedah append() untuk menambah imej ke div:

<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>

Memuatkan dan melambangkan imej dengan JavaScript

kaedah JavaScript createElement() dan appendChild() mencapai hasil yang sama:

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

imej yang dinamik dengan dinamik dengan JQuery's append()

Menambah imej secara dinamik menggunakan pembolehubah:

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

Menambah imej dengan ID Variabel melalui Ajax dan JQuery

Ajax membolehkan pemuatan imej dinamik dan penambahbaikan:

<code class="language-javascript">$.ajax({
  url: '/get-image-path', // Endpoint to fetch image path
  success: function(data) {
    $('#myDiv').append('<img src="'%20+%20data.imagePath%20+%20'" id="dynamicImg' + data.imageId + '" alt="Dynamic Image">');
  }
});</code>

Menambah imej melalui Ajax di Laravel

di Laravel, gunakan penolong

dalam panggil balik kejayaan AJAX: asset()

Atas ialah kandungan terperinci jQuery tambah gambar ke cache penyemak imbas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!