jQuery Ajouter une image au cache du navigateur

Ce guide montre comment précharger des images dans le cache du navigateur à l'aide de jQuery, améliorant les performances du site Web en réduisant les temps de chargement. Les images sont ajoutées à un élément div caché dans le dom.

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

Ce code crée un Hidden div avec l'ID "IMG-CACH" et ajoute des éléments d'image. La boucle $.each itère dans l'objet images, ajoutant chaque image au cache.

Approche alternative:

Une méthode plus simple pour précharger des images sans div cachée:

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

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

Cette approche crée directement des objets Image, attribuant l'attribut src. Le navigateur va ensuite récupérer et mettre en cache ces images sans avoir besoin de les ajouter au dom.

Questions fréquemment posées

Cette section répond aux questions courantes sur l'ajout d'images à une page Web à l'aide de jQuery.

Ajout d'images à une div avec jQuery

Utilisez la méthode append() pour ajouter une image à un div:

$('#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 " />');

Chargement et ajout des images avec JavaScript

Les méthodes de JavaScript createElement() et appendChild() obtiennent le même résultat:

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

Images dynamiquement appuyées avec dynamique avec le append()

de jQuery

Ajouter dynamiquement des images en utilisant des variables:

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

Images en ajoutant avec des ID variables via Ajax et JQuery

ajax permet le chargement dynamique d'images et l'appel d'image:

$.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">');
  }
});

Images en ajoutant via Ajax dans Laravel

Dans Laravel, utilisez l'assistance asset() dans le rappel Ajax Success:

$.ajax({
  url: '/get-image',
  success: function(data) {
    $('#myDiv').append('<img src="' + "{{ asset('" + data.image + "') }}" + '" alt="Laravel Image">');
  }
});
```  Remember to adjust paths and endpoints to match your specific project setup.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!