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

Modifying a Sass variable using a Knockout binding or alternative method

What is the process for cancelling a pending request using jQuery in JavaScript Selenium?

Concealing a section of a table with JavaScript while preserving the original table structure

Initiate the AJAX call when the page is loaded

Adding a horizontal scrollbar to an iframe: A step-by-step guide

Implementing a Jquery check based on a checkbox

My HTML gets rearranged by browsers, causing a change in appearance

Tips on aligning multiple elements vertically in a justified manner

Aligning an image in a way that adjusts to different screen sizes

Ways to prevent horizontal scrolling in an image

Using jQuery AJAX to apply filters to forms and update URL hashes

Customize the drawer background in Vue Material

Upon loading the page, the menu automatically drops down for easy navigation

How to capture a change event in a dynamically loaded element using JQuery

Using jQuery to send data with an AJAX post request when submitting a form with

Is it possible to automatically collapse the Bootstrap navbar when the viewport is not wide enough?

The functionality of if and else statements within local storage is not functioning as

Ways to trigger a click event on a dynamically added class utilizing $(this);

Methods to prevent images from spilling over into divs?

Footer not positioned at the bottom of the page