Javascript Jcarousle-在设置动画之前加载图像，以防止出现白色空白方块

我和jCarousel在一家画廊工作。 我创建了一个脚本，每次单击数组中的“下一步”按钮时，都会将下一个图像加载到库中。每次单击“下一步”，都会加载接下来的五幅图像。这一切都非常好，但我的问题是，在加载图像之前，我看到了空的

，因此动画持续时间的一半，我只看到空方块移动。 我尝试了两种解决方案： 1） 为动画添加延迟-将

项添加到旋转木马后，添加一两秒钟的等待-这对我不起作用，因为动画的一部分似乎是将新添加的图像变为可见，因此如果我添加延迟动画功能，它会做完全相同的事情（暂时显示空方块）

有趣的是，如果我添加了一个警报，当我解除警报时，图像已经加载，动画也很完美——就像代码一直在运行，图像已经加载一样——但动画只有在警报关闭后才开始

2） 我试图将图像加载到某个不可见的缓存div，但当然我必须使其显示：无，同样，在动画开始之前，图像不会加载（并且图像被转换为显示：块

这是我用来加载图像的行、事件和函数名：

itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback} 

我知道这可能是不够的输入和代码，但脚本变得非常长，所以如果某个特定部分（或全部？）可用，请告诉我…我不想让消息变得杂乱无章：）

感谢您阅读此文， Yan

试试这个

---

干杯。

我通过以下方式实现了这一点：

• 在组装新的carousel li节点时，我添加了image元素，但没有设置src属性
• 将节点添加到旋转木马后，我将一个方法绑定到图像的加载事件。加载事件会增加已加载图像的计数。一旦计数与转盘大小相同，我就知道所有图像都已加载，我可以开始动画

e、 g

注意：这不是完整的工作代码；为了清晰起见，它被编辑为向下。另外，请记住，我要传递给

addItems（）

的数据是json对象数组，每个对象都包含一个ImageUrl属性。

Ok，尝试将$.load（img）添加到将图像添加到旋转木马的循环中，但没有成功。我真的以为可以：）

var imageLoadCount = 0;
var jcarousel = $("#myCarousel").data("jcarousel");

var imageLoaded = function() {

  imageLoadCount++;

  if(imageLoadCount === jcarousel.options.size) {
    // all the images have loaded.. begin the scroll
    jcarousel.options.auto = 5; // scroll every 5 seconds
    jcarousel.startAuto();
  }
};

var addItems = function(data) {

  jcarousel.size(data.length);

  $.each(data, function(index) {
    jcarousel.add(index + 1, getItemAsHtml(this));  // helper function to create node
  });

  $("img", carouselID).bind("load", imageLoaded);

  $("img", carouselID).each(function(index) {
    this.src = data[index].ImageUrl; // this triggers the image loaded event
  });
};