0

假设我有多个带有多个背景图像的 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
});
4

1 回答 1

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++;
  });
}

仍然以相同的方式调用该函数，并添加了设置 div 的类名

$(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));
});
于 2011-04-11T10:04:46.037 回答