Diese Anleitung zeigt, wie Bilder mithilfe von JQuery in den Browser -Cache geladen werden, wodurch die Leistung der Website verbessert wird, indem die Ladezeiten verkürzt werden. Die Bilder werden zu einem versteckten Div -Element innerhalb des Doms hinzugefügt.

(function($,D,W) {

    var JQUERY4U = {};

    JQUERY4U.UTIL = {

        images:
        {
            loadingImage: '<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174076317693190.gif"  class="lazy" alt="jquery add image to browser cache " /></img>',
            ajaxImage: '<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174076317789628.gif"  class="lazy" alt="jquery add image to browser cache " /></img>',
            savingImage: '<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174076317761887.gif"  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);

Dieser Code erstellt ein verstecktes div mit der ID "img-cache" und findet Bildelemente an. Das $.each Schleifen durch das images -Objekt iteriert und füge jedes Bild zum Cache hinzu.

Alternativer Ansatz:

Eine einfachere Methode zum Vorladen von Bildern ohne versteckte Div:

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

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

Dieser Ansatz erstellt direkt Image Objekte und zuweist das Attribut src. Der Browser holt diese Bilder dann ab und zwischenspeichert sie, ohne sie dem Dom hinzuzufügen.

h?ufig gestellte Fragen

Dieser Abschnitt beantwortet gemeinsame Fragen zum Hinzufügen von Bildern zu einer Webseite mit JQuery.

Hinzufügen von Bildern zu einem DIV mit JQuery

Verwenden Sie die Methode append(), um einem DIV ein Bild hinzuzufügen:

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

Laden und Anh?ngen von Bildern mit JavaScript

JavaScripts createElement() und appendChild() Methoden erzielen das gleiche Ergebnis:

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

dynamisch angeh?ngte Bilder mit Jquerys append()

fügen Sie dynamisch Bilder mit Variablen hinzu:

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

Bilder mit variablen IDs über AJAX und JQuery

AJAX erm?glicht das Laden und Anh?ngen von Dynamischen Bild:

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

Bilder über AJAX in Laravel

Verwenden Sie in Laravel den asset() Helfer im Ajax -Erfolgsruf:

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

Das obige ist der detaillierte Inhalt vonJQuery Fügen Sie Bild zum Browser -Cache hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!