Question

我有以下照片幻灯片：

$('#Yeah').click(function() {
    {% for photo in photos %}
    $('#slideShow').append('<img src="/image?blob_key={{ photo }}" />');
    % endfor %}

    $('#slideShow').cycle({ 
      fx:     'fade',
      speed:  300, 
      next:   '#slideShow', 
      timeout: 0 
    });
});

当我在div标签下面有空的img标签时，幻灯片显示根本不起作用。

<div id="slideShow">

</div>

但是，如果我在div标签下至少添加一个img标签，则它使用相同的代码。

<div id="slideShow">
    <img class="pics" width="200" height="200"> 
</div>

有没有人知道这是什么问题？任何帮助都表示赞赏。

Answer 1

我认为问题是在初始化Cycle插件之前图像没有完全加载。

浏览the source of the "lite" version，我看到了：

    $slides.each(function() {
        var $el = $(this);
        this.cycleH = (opts.fit && opts.height) ? opts.height : $el.height();
        this.cycleW = (opts.fit && opts.width) ? opts.width : $el.width();
    });

因为您没有指定width和height选项，所以它默认为<img>元素的宽度和高度，当图像未完全加载时，它们都为0。

编辑：尝试：

    var imgEls = $([]);

    {% for photo in photos %}
    imgEls = imgEls.add($('<img src="/image?blob_key={{ photo|urlencode }}" />'));
    {% endfor %}

    var numLoaded = 0;
    imgEls.load(function () {
        ++numLoaded;

        if (numLoaded == imgEls.length) {
            $('#slideShow').cycle({ 
                fx:     'fade',
                speed:   300
            });
        }
    });

    imgEls.appendTo($('#slideShow'));

EDIT2：语法错误：

$(this\).ajaxSubmit(options);

需要：

$(this).ajaxSubmit(options);
//    ^ No backslash character '\'

循环插件仅在预定义<img/>时有效？

1 个答案: