Question

我有一个带分隔符号的文本文件。我正在使用<p>标记上的jquery点击函数将行加载到隐藏div中的class="quotes" <a>。这很好。

单击此锚点时，此锚点也会启动Fancybox 2灯箱，并在内容中加载#quote-div（隐藏div中的div）内容。这也有效。

问题在于它发生得太快了。我需要快速加载文本并稍微延迟Fancybox。

当Fancybox打开时，有时会出现断断续续的情况，因为它会重新调整已加载文本的窗口高度。我尝试在悬停时加载文字而不是点击，但在Chrome中，如果鼠标移动到<a>标记上，它会触发另一个悬停。

我在这里的几个帖子中找到了setTimeout，但是我不确定如何在代码中设置它以便它在这种情况下正常工作。

我也在网站的其他部分使用Fancybox，我不希望发生延迟。

HTML：

<div style="display: none">
    <div id="quote-div">
        <p class="quotes">... content loads here...</p>
    </div>
</div>

<a id="q-click" class="clickBlock fancybox" href="#quote-div">&nbsp;</a>

jquery函数：

$('#q-click').click(function () {
    $.get('/assets/quotes.txt', function(data) {
        var quotes = data.split("\@");
        var idx = Math.floor(quotes.length * Math.random());
        $('.quotes').html(quotes[idx]);
    });
});

Fancybox代码：

$(".fancybox").fancybox({
    helpers: {
        title : {
            type : 'inside'
        },
        overlay: {
            locked: false
        }
    }
});

Answer 1

我会尝试在$.get()回调中以编程方式调用fancybox，因为您将两个不同的事件绑定到同一个元素。

类似的东西：

$('#q-click').click(function () {
    $.get('/assets/quotes.txt', function (data) {
        var quotes = data.split("\@");
        var idx = Math.floor(quotes.length * Math.random());
        $('.quotes').html(quotes[idx]);
        $.fancybox("#quote-div", {
            helpers : {
                title : {
                    type : 'inside'
                },
                overlay : {
                    locked : false
                }
            }
        });
    });
    return false;
});

然后删除常规的fancybox初始化脚本

$(".fancybox").fancybox()

延迟fancybox打开而不延迟数据加载

1 个答案: