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

【问题标题】：Delay fancybox open while not delaying data load延迟fancybox打开而不延迟数据加载
【发布时间】：2016-08-21 19:30:14
【问题描述】：

我有一个带有引号的文本文件。我正在使用<a> 标签上的jquery click 函数将行加载到<p> 和隐藏div 内的class="quotes" 中。这很好用。

单击时，此锚点还会启动 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
        }
    }
});

【问题讨论】：

标签： jquery random fancybox-2

【解决方案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()

【讨论】：