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工具提示延迟加载

回答

相关问题