如何在每次点击时首先显示负载而不是内容

Posted 2023-02-22

【中文标题】如何在每次点击时首先显示负载而不是内容

【英文标题】：How to show load first on every click and than the content

【发布时间】：2011-09-02 00:40:11

【问题描述】：

我有一个使用 jquery 滚动技术的四链接菜单（主页 | 关于 | 解决方案 | 联系方式），每次点击 Flesler's scrollTo 代码 : http://demos.flesler.com/jquery/serialScroll/ 和 TKYK 历史插件 http://tkyk.github.com/jquery-history-plugin/。好的，我的情况是，当我单击第二个链接“关于”时，它首先显示主页，而不是 setTimeout()，然后它显示正确的内容。无论如何隐藏以前的内容并显示某种“加载”然后显示新内容？

这是我的 init.js 代码：

函数调整大小（） var wdt = 1000; 变量 hgt = 500; 宽度 = $(窗口).wdt; 高度 = $(窗口).hgt; mask_width = 宽度 * $('.item').length; $('#debug').html(宽度 + ' ' + 高度 + ' ' + mask_width); $('#container,.item').css(width: width, height: height); $('#mask').css(width: mask_width, height: height); $('#container').scrollTo($('a.selected').attr('href'),0);

$(document).ready(function() //滚动x轴内容 $('a.panel').click(function() $('a.panel').removeClass('selected'); $(this).addClass('selected'); 当前 = $(这个); $('#container').scrollTo($(this).attr('href'),1000, easing:'easeInOutCubic',queue:true,duration:1500,axis:'xy' ); 返回错误；

); $(window).resize(function() resize(); ); // hash history function load(num) $('.content').load(num); $.history.init(function(url) load(url == "" ? "home" : url); ); $("a[rel='history']").click(function(e) var url = $(this).attr('href'); url = url.replace(/^.*#/,"!/"); setTimeout(function() $.history.load(url); ,1000); return false; );

);

【参考方案1】：

我没有确定问题，但我认为这会对您有所帮助：

$('a.panel').click(function() 
    $('a.panel').removeClass('selected');
    $(this).addClass('selected');
    $('a.panel').not($(this)).each(function() 
        $($(this).attr("href")).hide();
    );
    // show your loading here
    current = $(this);
    $(current.attr("href")).show()
    $('#container').scrollTo($(this).attr('href'),1000, easing:'easeInOutCubic',queue:true,duration:1500,axis:'xy', onAfter: function()  //hide your loading here  );
    return false;
);

这包括从菜单上的链接中隐藏所有容器，显示加载，显示您要显示的容器，然后隐藏加载。

编辑：

也许您甚至不需要加载...只需从 scrollTo 选项中删除 onAfter 即可。

【讨论】：

BM 感谢您的回复，但有一个小问题。当我实现您的代码时，滚动功能停止工作。另外，您在代码示例中说过“在此处显示您的加载”，现在您是在谈论这样的$('#loading').show();吗？