滞后的 jquery 预加载器图像

Question

我正在使用 jquery 在加载主要内容之前加载预加载图像。问题是，当我点击链接时，加载图像至少需要 5 秒才能显示。我希望在内容显示之前单击链接立即显示。

这是jquery；

$(function() {
    $("li#tabs.popup a").click(function(e) {
        $("#popup").slideDown().addClass('active');
        $('#popup').html('<center><img src="images/loader.gif" /></center>');
        $('#popup').load('wishlist.php');
        $('li#tabs.popup a').removeClass('selected');
        $(this).addClass('selected');
        e.stopPropagation();
    });
});

经过一番烦躁之后，我找到了问题的答案。由于某种原因，将加载程序放在所有其他功能之上将导致它顺利加载并立即单击。

所以我现在用的不是上面的代码，

$(function() {
    $("li#tabs.popup a").click(function(e) {
        $('#popup').html('<center><img src="images/loader.gif" /></center>');
        $("#popup").slideDown().addClass('active');
        $('#popup').load('wishlist.php');
        $('li#tabs.popup a').removeClass('selected');
        $(this).addClass('selected');
        e.stopPropagation();
    });
});

它运行得非常完美！

Answer 1

您的标题有点令人困惑，所以看来您实际上想要预加载预加载图像:)

我们使用了

Answer 2

我认为发生这种情况是因为当您开始将图像显示为 html 内容时，它会加载然后显示。您已经可以将其加载到您的页面上，例如：

<div id="popup">
    <div id="spinner"> <!-- Assuming that it has display: none in CSS -->
        <center><img src="images/loader.gif" alt="Loading..." /></center>
    </div>

    <!-- Load the content here. -->
</div>

您的脚本看起来像

$(function() {
    $("li#tabs.popup a").click(function(e) {
        $('#popup').find('#spinner')
                   .show()
                   .end()
                   .load('wishlist.php')
                   .slideDown()
                   .addClass('active');

        $('li#tabs.popup a').removeClass('selected');
        $(this).addClass('selected');

        e.stopPropagation();
    });
});

旁注：并且您实际上不必编写$('li#tabs')，只需 $('#tabs') （或更恰当地说 $('.tabs') 即可。当您将选择器设置为 li#tabs 它导致 Sizzle 过滤结果document.getElementById('tabs') 查看匹配元素的标记名是否为 li。