Question

我正在设计一个移动网站，牢记所有领先的浏览器 - Safari，Chrome，Dolphin，Opera。

我想在页面导航/更改/更新页面时显示“加载”元素。

我无法在锚标记上使用点击事件，因为preventDefault();存在许多点击事件。

我尝试了以下内容：

$(window).on('beforeunload', function() { ... });

但它不适用于 Dolphin 或 Opera 。

有人可以建议跨浏览器解决方案吗？

-

编辑：我发现在提出问题时我并不是很清楚，道歉。我在这里创建了一个小提琴 - http://jsfiddle.net/hiteshpachpor/7dadA/5/基于响应。该示例使用事件冒泡。

现在这是我面临的问题。我会在每次页面更改/导航时显示加载程序（$('.jacket').show();）。但我不希望它显示是否点击了链接;我想在我的页面上做其他操作。现在，在所有这些操作中添加$('.jacket').hide();行就足够了，但对于缩放原因来说它不是很理想。

这就是我评估'beforeunload'方法的原因，但没有运气，因为它不是跨浏览器兼容的。

有什么建议可以解决这个问题吗？

Answer 1

我认为你想要实现的是基本的AJAX请求？但是你会以错误的方式去做。您可以改为使用div加载请求的页面，然后设置ajax start处理程序以显示加载消息。

您的网页标记看起来像

<nav>
  <button data-url="homeURL">Home</button>
  <button data-url="anotherURL">Other</button>
</nav>
<div id="loadhere"></div>

结果jquery将是这样的：

//on button click
$('nav button').click(function(){
  //set the url 
  url = $(this).attr('data-url');
    //load the page
    $('#loadhere').load(url);
});

//ajax start handler
$(document).ajaxStart(function(){
  $('#loadhere').text('LOADING');
});

这是一个example codepen

希望这会有所帮助

Answer 2

你可以在body元素中有一个onLoad函数调用一个加载div来显示，然后setTimeout让我们说3秒然后隐藏加载div并显示所有其他div /身体的其余部分

编辑：我很确定这适用于所有浏览器。一旦我上电脑（现在在手机上），我会附上一段代码片段;）

Answer 3

如评论中所述。但是我更喜欢事件委托而不是在dom上附加事件。

// this is your original eventListener which prevents the default action (aka, navigating away)
$('#random-link').click(function(event){
    event.preventDefault();
    $('#result').text('I was clicked from random-link event.')
});

// this would be the delegated listener. It wouldn't have to be all "a" tags 
// that you respond to. It could be any css selector that causes the 
// loading message that you want.
$(window).on('click', 'a', function() {
   alert('I still bubble up.');
});

更新

也许你不应该为＆＃34;链接＆＃34;。

触发$('.jacket').show()

$('.jacket').hide();

$('a:not(.prevent)').click(function() {
    $('.jacket').show();
});

$('.prevent').click(function(event) {
    event.preventDefault();
    $('.jacket').hide();
});

Answer 4

有一个jquery移动小部件。这用到版本1.4

  $.mobile.loading( "show", { //show loading image
    text: "Your request is processing. please wait ...",
    textVisible: true,
    theme: "b",
    textonly: false,
  });

寻求帮助Jquery Mobile Loader Widget。

Answer 5

回复您的修改：

您可以使用event.isDefaultPrevented()。

$(function() {
    $('.jacket').hide();

    $('.prevent').click(function(event) {
        event.preventDefault();
    });

    $('a').click(function(event) {
        if (!event.isDefaultPrevented())
            $('.jacket').show();
    });
});

JSFiddle：http://jsfiddle.net/F4uPx/

警告：确保在其他事件处理程序之后分配$('a').click()事件处理程序;否则它将首先执行，并且会因为preventDefault()尚未解雇而失败。

移动浏览器上的Javascript / jQuery页面更改事件

5 个答案: