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

发布于 2024-12-03 17:06:59 字数 667 浏览 0 评论 0原文

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

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

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

有趣的是，如果我添加一个警报，当我关闭它时，图像已经加载并且动画是完美的 - 就好像代码继续运行并且图像已加载 - 除了动画仅在警报结束后才开始已关闭。

2）我尝试将图像加载到一些不可见的缓存div，但当然我必须使其显示：无，并且同样，直到动画开始才加载图像（并且图像转为显示）：阻止...

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

itemLoadCallback：{onBeforeAnimation：mycarousel_itemLoadCallback}

我知道这可能是输入和代码不足，但脚本变得很长，因此如果特定部分可能有用（或全部？），请告诉我......我不想使消息变得混乱:)

感谢您阅读本文，严

原文

I'm working on a gallery with jCarousel.
I've created a script that loads the next images to the gallery each time I click on the next button from an array. Each time I click next, the next five images are loaded. It all works really great, but my problem is that I see the empty

before the images are loaded, so half of the animation's duration I only see empty squares moving.
I tried two solutions :
1) add a delay to the animation - after the

items are added to the carousel, add a wait of a second or two - which didn't work for me, because it seems that part of the animation is to turn the newely added images to visible, so if I add a delay animation function, it does the exact same things (show empty squares for a moment)...

The interesting thing is that if I add an alert, when I dismiss it the images are already loaded and the animation is perfect - as if the code keeps running and the images are loaded - except the animation starts only after the alert is closed.

2) I tried to load the images to some invisible caching div, but of course I have to make it display:none, and again the same, the images are not loaded until the animation starts (and images are turned to display: block ...

this is the line, event and function name I use to load the images:

itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}

I know this might be insufficient input and code, but the script became very long so if a specific part could be usefull (or all of it?) just let me know... I don't want to clutter the message :)

Thanks for reading this,
Yan

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

流绪微梦 2024-12-10 17:06:59

我通过执行以下操作来完成此操作：

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

例如

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 属性。

I accomplished this by doing the following:

as I'm assembling the new carousel LI nodes, I add image element but I don't set the src attribute
after I'm done adding the nodes to my carousel, I bind a method to the load event of the images. The load event increments a count of images that have loaded. Once the count is the same as the carousel size, then I know that all the images are loaded and I can start the animation.

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

Note: this isn't complete working code; it was edited to down for clarity. Also, keep in mind, the data I'm passing in to addItems() is array of json objects, each of which contains an ImageUrl property.

回复收藏 0 原文