jquery add image to browser cache

This is how you might preloading images using jQuery to add the images to browser cache (as part of a DOM div element which is hidden).

(function($,D,W) {

    var JQUERY4U = {};

    JQUERY4U.UTIL = {

        images:
        {
            loadingImage: '<img class="loading" src="images/loading.gif" alt="loading" />',
            ajaxImage: '<img class="msg-loading" src="images/ajax-loader.gif" alt="" />',
            savingImage: '<img class="loading" src="images/saving.gif" alt="saving" />'
        },

        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(); //preload images in browser cache
    });

})(jQuery,document,window);

Other techniques

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

// Loop through and declare an element that will not actually be used.
$.each(imageArray, function (i, val) {
  $('<img />').attr('src', val);
});

Frequently Asked Questions about jQuery and Image Browser Cache

How can I add an image to a div tag using jQuery?

To add an image to a div tag using jQuery, you can use the append() method. This method inserts specified content at the end of the selected elements. Here’s a simple example:

$("div").append('<img id="theImg" src="theImg.png" />');
In this example, an image with the source ‘theImg.png’ and the id ‘theImg’ is added to the div tag.

How can I load and append an image to DOM using JavaScript?

Loading and appending an image to the DOM using JavaScript can be done using the createElement() and appendChild() methods. Here’s an example:

var img = document.createElement('img');
img.src = 'image.png';
document.body.appendChild(img);
In this example, an image with the source ‘image.png’ is created and appended to the body of the document.

How can I dynamically add an image to a div using jQuery’s append method?

To dynamically add an image to a div using jQuery’s append method, you can use the following code:

$("div").append('<img src="image.png" alt="MyImage" />');
In this example, an image with the source ‘image.png’ and the alt text ‘MyImage’ is dynamically added to the div.

How can I append an image with a variable assigned id using AJAX and jQuery?

To append an image with a variable assigned id using AJAX and jQuery, you can use the $.ajax() method. Here’s an example:

$.ajax({
url: 'image.png',
success: function(data) {
$('div').append('<img id="variableId" src="image.png" />');
}
});
In this example, an image with the source ‘image.png’ and a variable id is appended to the div upon successful AJAX request.

How can I append an image using jQuery to a div element through AJAX in Laravel?

To append an image using jQuery to a div element through AJAX in Laravel, you can use the $.ajax() method and Laravel’s asset helper. Here’s an example:

$.ajax({
url: '/get-image',
success: function(data) {
$('div').append('<img src="{{ asset(' + data.image + ') }}" />');
}
});
In this example, an image with the source specified by the ‘image’ property of the data returned from the ‘/get-image’ endpoint is appended to the div.