延遲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打開，同時不延遲數據加載

回答

相關問題