延迟fancybox打开，同时不延迟数据加载

我有一个带引号分隔行的文本文件。我正在使用<a>标签上的jquery点击函数在隐藏div中加载<p>与class="quotes"的行。这工作正常。延迟fancybox打开，同时不延迟数据加载

点击后，此锚点也会启动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 
     } 
    } 
});

来源

2016-08-21 liquidRock

我会尝试调用的fancybox编程的$.get()回调中，因为你要绑定两个不同的事件到相同的元素。

喜欢的东西：

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

来源

2016-09-14 03:32:29 JFK

感谢，我给它一个尝试。 – liquidRock

延迟fancybox打开，同时不延迟数据加载

回答

相关问题