Question

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

，所以动画持续时间的一半我只看到空方块在移动。我试过两个解决方案： 1）为动画添加延迟 - 在

项目添加到轮播后，添加等待一两秒 - 这对我不起作用，因为它似乎是动画的一部分是将新添加的图像变为可见，所以如果我添加延迟动画功能，它会完成相同的操作（暂时显示空方块）......

有趣的是，如果我添加一个警报，当我解除它时，图像已经加载并且动画是完美的 - 好像代码一直在运行并且图像被加载 - 除了动画仅在警报开始后启动闭合。

2）我试图将图像加载到一些看不见的缓存div，但当然我必须让它显示：none，同样，在动画开始之前不会加载图像（并且图像转向显示：阻止......

这是我用来加载图片的行，事件和函数名称：

itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}

我知道这可能是输入和代码不足，但是脚本变得很长，所以如果某个特定部分可能有用（或者所有部分？），请告诉我...我不想让信息混乱：）

感谢您阅读本文，颜

Answer 1

试试这个http://elouai.com/javascript-preload-images.php

干杯。

Answer 2

我通过以下方式完成了这项工作：

当我正在组装新的轮播LI节点时，我添加了图像元素，但我没有设置src属性
在我将节点添加到我的轮播后，我将一个方法绑定到图像的 load 事件。加载事件会增加已加载的图像数。一旦计数与轮播大小相同，那么我知道所有图像都已加载，我可以开始动画。

e.g。

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

注意：这不是完整的工作代码;为了清晰起见，它被编辑了。另外，请记住，我传递给addItems()的数据是json对象数组，每个对象都包含一个ImageUrl属性。

Jcarousle - 在动画之前加载图像以防止白色空方块

2 个答案: