JQuery Fügen Sie Bild zum Browser -Cache hinzu

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.

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

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:

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

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

Hinzufügen

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

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

Laden und Anhängen von Bildern mit JavaScript

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

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

dynamisch angehängte Bilder mit Jquerys append()

fügen Sie dynamisch Bilder mit Variablen hinzu:

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

Bilder mit variablen IDs über AJAX und JQuery

anhängen

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

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

Bilder über AJAX in Laravel

anhängen

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

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

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!