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

你的标题有点混乱，所以看起来你真的想要预加载你的预装图像：）

我们过去曾使用过this script来确保我们的css中的所有图片引用都已预加载。然后我会改变你的“预加载”动画以使用css（你可以将背景图像设置为动画gif），而不是动态创建图像标签。

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。

滞后jquery预加载器图像

2 个答案: