jquery - 如何在 jquery 工具提示上显示之前使用繁忙的 img 预加载 img

Question

我正在使用此脚本从产品列表页面上的缩略图加载更大的图像：

$(function() {
$('a.listingProductImageTooltip').tooltip({
    track: true,
    delay: 0,
    showURL: false,
    bodyHandler: function() {
        return "<img src='"+ $(this).attr('rel') +"' alt='image preview' /><div style=\"padding-top: 10px\">"+ this.tooltipText+"</span>";
},
    fade: 250
}); });

但是如何预加载新的更大图像以显示在工具提示插件中？

提前 Tnx

Answer 1

如我所见，您将更大尺寸的 img src 存储在 rel 属性中。因此，您可以在页面完成初始加载后执行此操作

$(window).load(function() {
    $('a[rel]').each(function() {
        var theImage = new Image();
        theImage.src = $(this).attr('rel');
    });
});

它将创建 Javascript 图像对象并将每个锚点的 rel 属性分配给每个图像对象的 src。所以图片会在后台预加载