Question

我制作了一个图片预览器，当您将鼠标悬停在该链接上时会弹出一个图像。它有效，但有时当我停止在链接上停留时，它将无法.empty div。我会偶尔得到上一张图片，错误文字或两张图片。如果我再次悬停它是固定的。这种情况可能发生在10％的时间。我也无法获得div的高度。我不知道这是否也有关系。

$('<div/>',{
   'id' : 'popup'
    }).appendTo('body');

function showError() {
    $('<div/>').text('Picture Not Found').appendTo('#popup');
    $('#popup').show();
};


function getImage() {
        $.ajax({
        type: 'GET',
        url: link,
        error: function(){
            showError();
        },
        success: function(data) {
            var styleText = $('style', data).text();
            var imageRegex = /background-image: url\('[^']+/;
            var imageMatch = styleText.match(imageRegex);
            if (imageMatch) {
                var image = imageMatch[0].replace(/background-image: url\('/, ''); 
                $('#popup').append('<img src="' + image + '" style="padding:0px" alt="">');
            } else {
                showError();
            };

        }
     });
};

$('a').filter(function() {
    return /users\/\d+\/pictures/.test(this.href);
    }).removeAttr('title').hover(function(e) {

    link = this.href.replace('http://', 'https://');
    getImage();
    $('#popup').show();
    height = $('#popup').outerHeight();
    console.log(height);

    }, function() {
        $('#popup').empty().hide();

    })
});

Answer 1

在快速通过链接时触发悬停事件看起来是个问题。似乎是通过向悬停添加延迟来修复。

这是指向有用的指南的链接。 http://jelaniharris.com/2008/adding-a-delay-to-jquery-functions/

我还将其更改为单独的div以显示错误消息，因此我可以更改图像的src而不是清空div。我认为这会让它快一点。

当div清空时，加载Ajax的弹出图像并不总是清除

1 个答案: