Question

假设我们有一张图片幻灯片。这些图片的缩略图显示在带有滑块的div包装器中（我用Jquery创建），每个图像都包含在带有CSS背景集的<li>中，这当然代表图像。我选择使用背景图像来处理布局问题，因为它们的大小和宽高比都不同。

图像来自数据库并动态创建。

我想做的是：

在每个<li>上显示“加载”消息，并等待后台（图像）加载到缓存中，然后使用fadeIn显示它。他们只有我能想到的方式（不是我可以，因为我不太确定如何以及它是否可行）：

在显示“正在加载”消息时，暂时取消设置每个<li>的背景
为每个背景制作一个循环以获取图片网址
使用$ .get函数加载它，然后在加载后执行我想要的任何操作

除了可行的事情，这意味着它们会按顺序加载，所以如果由于某种原因不能加载脚本将永远不会继续！

我见过一些使用JS加载图片的网站只有在浏览器可见的情况下加载图片时，这可能与我正在寻找的情况相同，因为我使用的是滚动条，只有部分图像立即显示和页面加载时

Answer 1

嗯，如果您只使用img标签，我认为事情可能会更简单，但如果您确实想使用背景图片，那么我只能提出解决方法。

诀窍是创建一个新图像（使用the Javascript image object），并确保它已加载，但不显示此图像。加载图像并在缓存中后，该图像将作为图库中的背景图像使用。

因此，您所要做的就是确保在加载相应图像后仅更改图像LI的背景图像。您最初可以使用默认的“加载”图片加载所有LI。

所以你的代码应该是这样的：

HTML（加载图片的style定义可以在您的外部样式表中）：

<ul>
<li id="pic1" style="background-image:url('images/loading.gif')"></li>
<li id="pic2" style="background-image:url('images/loading.gif')"></li>
<li id="pic3" style="background-image:url('images/loading.gif')"></li>
...
</ul>

你的jQuery / Javascript：

var img = new Array();

// The following would be in some sort of loop or array iterator:

var num = [NUMBER] // You'd use this number to keep track of multiple images.
  // You could also do this by using $("ul>li").each() and using the index #

img[num] = new Image();

  // Specify the source for the image
var imgSource = "http://yourimage.com/example.jpg";

  // only append the corresponding LI after the image is loaded
img[num].onload = function() {
    $("#pic" + num).attr("style", "background-image:url('" + imgSource + "')");
};

img[num].src = imgSource;

您必须为每个LI提供适当的CSS / ID等，并且您必须将上述内容调整为用于显示图库的循环或函数。

Here's a jsFiddle example。（出于测试目的，它是一个很大的图像，所以加载需要一段时间）。

Answer 2

你可以用css技巧代替一些长的javascript代码在这里你可以这样做：

<强> HTML：

<ul id="slideshow-container">
  <li><div id="image1"></div></li>
  <li><div id="image2"></div></li>
  <li><div id="image3"></div></li>
  <li><div id="image4"></div></li>
</ul>

<强> CSS：

#slideshow-container>li{
  background-image:url('loading.gif')
}

#slideshow-container>li>div{
  width:100%;
  height:100%;
}

#slideshow-container>li>div{
  background-color:transparent;
}

#image1{
  background-image:url('image1.jpg');
}

#image2{
  background-image:url('image2.jpg');
}

#image3{
  background-image:url('image3.jpg');
}

#image4{
  background-image:url('image4.jpg');
}

的说明：
幻灯片的图像将是li中包含的div的背景。在加载图像之前，背景将是透明的，这将显示li的背景，即动画加载gif 简单来说，在加载div中包含的幻灯片图像之前，将显示li的加载图像。

Answer 3

好吧，我想也许你的事情太复杂了。当图像可能在标签内时，我不确定你为什么使用css背景。你说原因是因为你的图像是动态创建的...我不明白。

你可以做的是创建一个返回图像的页面，也许你可以使用一些参数...像图像大小：

http://www.mysite.com/create_image.php?size=200x100&id=img1

然后你需要做的就是将这个url放在img标签的SRC中......如果你愿意，你可以在页面加载时预加载图像。或者当你的滑块移动时

或者我可能没理解你的问题= D

Answer 4

我使用的解决方案有两层元素。

一层是背景加载符号作为背景的案例。总是看到这一点。然后在上面的第二层中，我将元素放在图像中，并使用带有.ready()和.delay()的jQuery .fade()函数。

因为这是令人费解的解释，我将展示我的所作所为：

    <!-- Page Elements -->

    <div id="background-loading"> // Background image of spinner
      <div id="slider-case"> // Container of slider
        <ul id="slider-content">
          <li class="slider-image"></li>
          <li class="slider-image"></li>
          <li class="slider-image"></li>
        </ul>
      </div>
    </div>

    <!-- Script -->

  // Somewhere you have a script that manages the slider
  // Below is the loading animation/image manager
  $(document).ready(function() {
    $('#slider-content').delay(200).animate({opacity:1.0}, 'linear', function(){ 
      $('#background-loading').animate({opacity:0, 'margin-left':'-70px'}, 'linear');
      $('.slider-image').animate({opacity:1.0, 'margin-left':'0em'}, 'linear', function(){});
    });
  });

延迟和淡入淡出使得加载时间看起来是有意的，而.ready()将等待元素完全加载。

通过拥有单独的背景图层，除了滑块之外，您不必担心操纵任何内容。要添加其他效果，您可以对图像加载进行回调，以对淡入加载动画进行淡入淡出。

Answer 5

它查找具有src属性或背景Image css属性的元素，并在加载图像时调用动作函数。

/**
 * Load and wait for loading images.
 */
function loadImages(images, action){
    var loaded_images = 0;
    var bad_tags = 0;        

    $(images).each(function() {
    //alert($(this).get(0).tagName+" "+$(this).attr("id")+" "+$(this).css("display"));
        var image = new Image();
        var src = $(this).attr("src");
        var backgroundImage = $(this).css("backgroundImage");            
        // Search for css background style
        if(src == undefined && backgroundImage != "none"){
            var pattern = /url\("{0,1}([^"]*)"{0,1}\)/;                
            src = pattern.exec(backgroundImage)[1];                
        }else{
            bad_tags++;
        }
        // Load images
        $(image).load(function() {
            loaded_images++;                
            if(loaded_images == ($(images).length - bad_tags))
                action();
        })
        .attr("src", src);
    });
}

等到后台（css）中的图像被加载

5 个答案: