jQuery - загружать только те предопределенные фоновые изображения CSS, которые используются в документе?

Question

Допустим, у меня есть несколько div с несколькими фоновыми изображениями, и я хочу предварительно загрузить их, как показано ниже в коде.В некоторых документах я не использую все эти фоновые изображения, поэтому имеет смысл предварительно загружать только те, которые появляются в документе, вместо предопределения тонны фоновых изображений, которые всегда загружаются, даже если они не используются в документе.* У меня есть этот код, который загружает изображения, но я хотел бы, чтобы изображения загружались, только если они используются.

$(document).ready(function()
{
    var img = document.createElement('img');

    img.onload = function()
    {
        console.log("%o finished loading", this);
        //Set mouseover/mouseout event here
    };

    img.src = 'image.png', 'image2.png', 'image3.png'; // i realized that i have no idea how to add more images
});

Answer 1

Я бы порекомендовал вам динамически подавать массив изображений в javascript, используя либо базу данных, либо просто передав массив, относящийся к документу, который вы просматриваете.

Таким образом, вы можете использовать такую ​​функцию, как эта:

var BuildImages = function(imgs)
{
  for(var i = 0; i < imgs.length; i++)
  {
    var img = document.createElement('img');

    img.load(function(e)
    {
       console.log("%o finished loading", this);
       //Set mouseover/mouseout event here
    });

    img.src = imgs[i];
  }
}

А затем вызвать его из документа следующим образом:

$(document).ready(BuildImages(new Array('image.png', 'image2.png', 'image3.png')));

//// ОБНОВЛЕНИЕ

var buildImages = function(divsclassname, imgs)
{
  var i = 0;
  // Loop through all divs with the class name you pass into this function
  $('.'+divsclassname).each(function(e)
  {
    // Check for has-image
    if(!$(this).hasClass('has-image'))
    {
      // If not found then set the background image and add class
      $(this).css('background-image', imags[i]).addClass('has-image');
    } 
    i++;
  });
}

Все еще вызывать функцию таким же образомс добавлением установки имени класса divs

$(document).ready(function(e)
{
  // Define your images in an array
  var images = new Array('image.png', 'image2.png', 'image3.png');

  // pas in the images and the classname of the divs you want to have bg images
  buildImages('yourdivsclassname', images));
});