循环插件仅在存在 时才起作用。预定义的?

发布于 2024-12-02 00:22:54 字数 643 浏览 1 评论 0原文

我有以下方法来进行照片幻灯片播放:

$('#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>

有谁知道有什么问题吗?任何帮助表示赞赏。

I have following to do the photo slideshow:

$('#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 
    });
});

When I have empty img tag under the div tag, the slideshow won't work at all.

<div id="slideShow">

</div>

However, if I at least add one img tag under the div tag, it works with the same codes.

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

Does anyone have any clue what's the problem ? Any helps are appreciated.

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

夜吻♂芭芘 2024-12-09 00:22:54

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

查看“lite”版本的来源,我明白了:

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

因为您没有指定 widthheight 选项,所以它默认为 元素的宽度和高度,当图像未完全加载时,这两个值都是 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'));

编辑2:存在语法错误:

$(this\).ajaxSubmit(options);

需要是:

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

I think that the problem is that the images are not fully loaded before the Cycle plugin is initialized.

Looking through the source of the "lite" version, I see:

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

Because you do not specify the width and height options, it defaults to the width and height of the <img> element, which are both 0 when the image is not fully loaded.

EDIT: Try:

    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: There is a syntax error:

$(this\).ajaxSubmit(options);

needs to be:

$(this).ajaxSubmit(options);
//    ^ No backslash character '\'
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文