jQuery UI工具提示延遲加載

當懸停在鏈接上時，我想先等待至少一秒，然後再顯示帶有動態加載工具提示的工具提示。jQuery UI工具提示延遲加載

我已經創建是遵循jQuery代碼：

$(document).ready(function() { 
    $("div#galleries ul li:not(.active) a").tooltip({ 
    items: "a", 
    show: { delay: 1000 }, 
    content: 'Loading preview...',   
    open: function (event, ui) { 
     previewGallery(event, ui, $(this)); 
    } 
    }); 
}); 

function previewGallery(event, ui, aLinkElement) { 
    event.preventDefault();  
    ui.tooltip.load("http://www.someurl.com/Preview.aspx #preview"); 
}

這似乎工作得很好，你可以在這裏看到： http://fotos.amon.cc/

（簡單地在畫廊的列表懸停）但是我在開始時並沒有意識到，當懸停在鏈接上時，預覽文本的加載會立即發生。所以，如果你在快速的所有鏈接懸停，你會設置幾個要求： enter image description here

從用戶的角度看（不知道的請求被解僱），它看起來已經就是我想要的，但如何只當工具提示實際顯示時，開始加載預覽？

感謝，多米尼克

來源

2014-01-30 DominikAmon

你試圖把tooltipp初始化成一個功能，並與setTimout稱它爲（）on（'mouseover'）？ – ggzone

可能會做的伎倆，但不jQuery提供一個適當的方法呢？ – DominikAmon

現在鏈接看起來像你說得對。如果您已經解決了問題，請分享您的答案。 – Foreever

我到底做了什麼是使用window.setTimeout和window.clearTimeout：

var galleryToolTipTimer = null; 
var previewElement = null; 

$(document).ready(function() { 

$("div#photos div a img").tooltip(); 
$("div#galleries ul li:not(.active) a") 
    .tooltip({ items: "a", content: 'Loading preview...', disabled: true, open: function (event, ui) { previewElement.appendTo(ui.tooltip.empty()); } }) 
    .mouseover(function (e) { 
     if (galleryToolTipTimer != null) { window.clearTimeout(galleryToolTipTimer); } 
     var aLinkObject = $(this); 
     galleryToolTipTimer = window.setTimeout(function() { previewGallery(aLinkObject); }, 500); 
    }).mouseleave(function (e) { 
     window.clearTimeout(galleryToolTipTimer); 
     $(this).tooltip("option", { disabled: true }); 
    }); 
}); 
function previewGallery(aLinkElement) { 
previewElement = $("<div/>").load(aLinkElement.closest("div").data("galleryPreview") + "/" + aLinkElement.data("path") + " #preview", function() { 
    aLinkElement.tooltip("open");   
});  
}

作品至少我想要的方式。

要看到它在行動，只需轉到http://fotos.amon.cc/和懸停在一個預覽左邊的畫廊鏈接： enter image description here

來源

2014-03-19 08:21:40 DominikAmon

jQuery UI工具提示延遲加載

回答

相關問題