0

我有一个页面，可以从 youtube 获取提要，然后将其显示在此页面上。有 3 行，每行 4 张图片，每张对应 youtube 视频。我从 youtube 提要本身获得这些图片链接。

我想要实现的是在渲染这些图像时，我想一次从 youtube 获取图像一行。如果图像加载未完成，我想等到下一行图像被获取。

有人可以指导我如何做到这一点吗？我阅读了有关 jquery 延迟对象和回调的内容，但由于 jquery/js 不强，无法真正破解这一点。js 异步执行，因此所有图像请求一个接一个地进行，并且无法让 js 等到每行的图像完全呈现后再发送下一行。

我目前有一个 for 循环和 diaply 图像，如下所示：

$j("#thumbnail_image_"+i).css({'background-image':'url('+cdnPath+')'});
myImage[i].src = cdnPath;
4

2 回答 2

0

基本上，如果您使用适当的 IMG 元素来存储图像，您可以订阅它的 onload 和 onerror 事件。然后你可以计算已经加载了多少张图片

var loaded = 0;
for (var i = 0; i < imgtags.length; i++) {
   imgtags[i].src = "/path/to/img";

   function handle() {
       loaded++;
       if (loaded == imgtags.length) {
           loaded = 0;
           // call next row or finish
       };
   };
   img.onload = handle;
   img.onerror = function () { 
       handle(); 
       // possible error handling here
   };
};

其中 imgtags 是当前行中包含 IMG 元素的数组。不要忘记将每行的计数设置为 0。因此，您不需要 JQuery。

如果你不使用 IMG 元素并为 div 设置背景，我认为这是不可能实现的。

演示

于 2013-04-01T11:46:42.163 回答
0

如果您想使用 Deferreds/Promises 执行此操作，则可以执行以下操作：

$(function() {
    function loadRow($imgs, timeout) {
        var dfrd = $.Deferred(),
            n = 0;
        $imgs.each(function() {
            this.onload = function() {
                if(++n == $imgs.length) { dfrd.resolve(); }
            }
            this.src = "/path/to/img";
        });
        setTimeout(dfrd.resolve, timeout);//in case of slow network or img.onload failure
        return dfrd.promise();
    }

    var $images = $(img.whatever),//adjust as required
        rowlength = 5,//adjust as required
        rowFilter = function(i) {
            return function(index) {
                return (index > i * rowlength) && (index < (i+1) * rowlength);
            }
        },
        nRows = Math.ceil($images.length / rowlength);
        timeout = 10000,//(ms) adjust as required
        d = $.Deferred().resolve();
    for(var i=0; i<nRows; i++) {
        var $imgs = $images.filter(rowFilter(i));
        d = d.then(loadRow($imgs, timeout));
    }
});

未经测试

loadRow()加载一行，并返回一个在该行加载或超时时解决的 Promise。

其余代码：

  • 设置按行索引选择图像的方法。
  • 建立一个种子延迟，立即解决以允许加载过程开始。
  • 建立了几个其他的变量。
  • 循环通过构建一个.then()链的行，该链在它进行时调用loadRow()。

.then()链是控制行加载顺序的机制。

该代码比其他答案中的代码更庞大，但它也为您做的更多，因为它包含一个超时机制。如果您有更简洁的方法来选择每行中的图像，它将简化。

于 2013-04-02T09:04:58.393 回答