jQuery将图像添加到浏览器缓存

>本指南演示了如何使用jQuery将图像预加载到浏览器缓存中，从而通过减少加载时间来改善网站性能。 图像被添加到DOM中的隐藏DIV元素中

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

此代码使用ID“ IMG-CACHE”创建一个隐藏的

，并将图像元素附加到其上。 div循环通过$.each>对象迭代，将每个图像添加到缓存。images

替代方法：

>一种更简单的方法，用于预加载图像，而没有隐藏的div：

此方法直接创建

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

对象，分配Image>常见问题src

本节回答有关使用jQuery向网页添加图像的常见问题。

>

>用jQuery

添加图像

使用

>方法将图像添加到DIV：

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

> Javascript的

和

方法达到相同的结果：

>

createElement()>用jQuery的appendChild()

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

动态附加图像

使用变量动态添加图像：append()

通过AJAX和JQUERY

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

将图像附加图像 ajax允许动态图像加载和附加：>

通过laravel中的ajax附加图像

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

在Laravel中，在Ajax成功回调中使用

助手

以上是jQuery将图像添加到浏览器缓存的详细内容。更多信息请关注PHP中文网其他相关文章！