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

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

(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);

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

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

替代方法：

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

此方法直接创建

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

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

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

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

>

>用jQuery

添加图像

使用

>方法将图像添加到DIV：

>使用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 " />');

> Javascript的

和

方法达到相同的结果：

>

createElement()>用jQuery的appendChild()

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

动态附加图像

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

通过AJAX和JQUERY

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

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

通过laravel中的ajax附加图像

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

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

助手

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