在滑动div之前等待多个图像加载

我试图将多个图像加载到名为'images'的div中，当它们完成加载时我希望它滑动div'图像'，它将显示实际图像刚刚被加载到它中，并且我正在写出如何实现这一点的麻烦。在滑动div之前等待多个图像加载

这是我迄今为止，它不是完全正确：

$('#button').click(function() { 
    var image=$('#images'); 

    $("<img>", { 
     src: "http://www.klossal.com/images/klossviolins/home.jpg" 
    }).appendTo("#images"); 
    $("<img>", { 
     src: "http://www.klossal.com/images/klossviolins/inventory.jpg" 
    }).appendTo("#images"); 
    $("<img>", { 
     src: "http://www.klossal.com/images/klossviolins/services.jpg" 
    }).appendTo("#images"); 

    if (image.get(0).complete) { image.slideDown(300); } 

});

来源

2013-02-28 loriensleafs

只听图像load事件。在事件处理程序计数图像时，如果加载的图像数量与请求的图像的原始数量相匹配，则启动显示。

http://jsfiddle.net/ZsGHY/

var imgCount = 0; 
var image=$('#images'); 
$('#button').click(function() { 
    console.log("Loading..."); 

    $("<img>", { 
     src: "http://www.klossal.com/images/klossviolins/home.jpg" 
    }).appendTo("#images").load(onImage); 
    $("<img>", { 
     src: "http://www.klossal.com/images/klossviolins/inventory.jpg" 
    }).appendTo("#images").load(onImage); 
    $("<img>", { 
     src: "http://www.klossal.com/images/klossviolins/services.jpg" 
    }).appendTo("#images").load(onImage); 

}); 

function onImage(e) 
{ 
    console.log("Image loaded"); 
    imgCount++; 

    if (imgCount == image.children().length) 
    { 
     image.slideDown(3000); 
    } 
}

.load(function name)意味着我们正在安装一个事件监听器将监听load事件一旦发生将要执行的功能。

onLoad(e){}意味着名为onLoad的函数接受一个参数 - 该参数从事件侦听器传递，它是一个event对象。功能的e内可以用来检测trigerred事件的对象，以盖特一些最新的更多...

来源

2013-02-28 12:03:41 strah

我已经看到了这一堆倍并且无法弄清楚它的意思，当你有图像的功能时（e）什么是'e'？ – loriensleafs 2013-02-28 12:07:09

另一件事是有多个按钮可以做到这一点，那么顶部的两个变量在点击之外甚至成为这种情况下的问题？ – loriensleafs 2013-02-28 12:14:18

对于你的第一个问题，请参阅我的编辑。我不确定我是否正确理解第二个问题。 – strah 2013-02-28 12:22:59

有一个很好的jQuery插件，触发元素中的所有图像后，事件被加载： http://desandro.github.com/imagesloaded/

见这个例子在小提琴： http://jsfiddle.net/TFVc9/2/

$('#button').click(function() { 
    var image=$('#images'); 

    //... 

    image.imagesLoaded(function() {image.slideDown(300)}); 
});

来源

2013-02-28 12:01:31

试试下面的代码：

<script> 
$(document).ready(function() { 
     $('#button').click(function() { 

      $('#theDiv').prepend('<img id="theImg" src="http://www.klossal.com/images/klossviolins/home.jpg" />') 
      $('#theDiv').prepend('<img id="theImg" src="http://www.klossal.com/images/klossviolins/inventory.jpg" />') 
      $('#theDiv').prepend('<img id="theImg" src="http://www.klossal.com/images/klossviolins/services.jpg" />') 
      $('#theDiv').prepend('<img id="theImg" src="http://www.klossal.com/images/klossviolins/services.jpg" />') 
      $('#theDiv').hide(); 

      $('#theDiv').slideDown('slow', function() { 
      // Animation complete. 
      }); 
     }); 
    }); 
</script>

来源

2013-02-28 12:25:32 web2008

在滑动div之前等待多个图像加载

回答

相关问题