Preloaded background images are loaded twice

Question

Preloaded background images are loaded twice

I have a background image that I am preloading and caching, but my code is not reading it from the cache. It keeps loading the image as if it is not cached. Even though I have 8 images in the "imgSrcArray," I have simplified this example by hard coding just one.

Does anyone have any suggestions?

imgSrcArray = ["images/img0"]; 

//preload image
$.each(imgSrcArray, function (i, val) {
    $(function() { 
        $(document.body).append($("<img id='imgHid" + i + "'/>").attr("src", val).hide()) 
    }); 
});

$(document).ready(function(){
    $('#bkgrnddiv').css('backgroundImage', 'url(images/img0)');   
});

jquery css

Answer 1

Answer №1

I have optimized the code for better performance and ensured that the image is loaded only once. It seems like the issue may have been related to repeatedly adding elements during the document load in the loop.

http://jsfiddle.net/Goepl/

var imageArray = ['http://placekitten.com/200/300'];

function preloadImages() {
    $.each(imageArray, function(index, value) {
            $('body').append($("<img id='hiddenImg" + index + "'/>").attr("src", value).hide())

    });
}

$(function() {
    console.log('Page fully loaded');
    preloadImages();
});

$(document).ready(function() {
    console.log('Document ready');
    $('#backgroundDiv').css({
        'background': 'transparent url(' + imageArray +') no-repeat 0 50%'
    });
});

Answer 2

I have optimized the code for better performance and ensured that the image is loaded only once. It seems like the issue may have been related to repeatedly adding elements during the document load in the loop.

http://jsfiddle.net/Goepl/

var imageArray = ['http://placekitten.com/200/300'];

function preloadImages() {
    $.each(imageArray, function(index, value) {
            $('body').append($("<img id='hiddenImg" + index + "'/>").attr("src", value).hide())

    });
}

$(function() {
    console.log('Page fully loaded');
    preloadImages();
});

$(document).ready(function() {
    console.log('Document ready');
    $('#backgroundDiv').css({
        'background': 'transparent url(' + imageArray +') no-repeat 0 50%'
    });
});

Preloaded background images are loaded twice

Answer №1

Similar questions

Ensuring one div remains in a fixed position relative to another div

Achieve automated zooming out using highcharts-ng through code

Bootstrap 4: The mystery behind why the popover fails to appear inside a scrollable dropdown

Calculating the duration of time using JQuery with provided start and end times

Using ko.observableArray() with over 1000 <div> elements can lead to decreased performance

Is it possible for a MySQL loop to only delete the first entry?

Change the class of an element only within the div that is directly below it

Centralized and secure masthead

How can I use jQuery to show the text value of a selected checkbox, dropdown menu, and flipswitch in a popup?

Duration of Animated Text

A step-by-step guide to adding a checkbox column dynamically within handsontable

HTML/CSS Top Bar: Position two contents at opposite ends of the top bar

Chrome method for creating Flexbox columns of equal height

The Facebook JS SDK is causing an XSS error and returning a "user_denied" response, even though the Auth Popup for FB.Login is not being

The replaceWith function in jQuery does not support <script> elements

Creating a dynamic Google Chart by fetching data from MongoDB with AJAX/JQuery

Make sure to blur all images whenever one of them is clicked

Issue with draggable div containing gmap not functioning on mobile browsers

Aligning a set of list items horizontally within an unordered list is a great way to maintain a clean

Is it necessary to make multiple calls following a successful AJAX request?