4

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

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

我不能在锚标签上使用点击事件，因为有很多带有preventDefault();.

我尝试了以下方法：

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

但它在Dolphin或Opera中不起作用。

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

--

编辑：我意识到我在问我的问题时不是很清楚，抱歉。我根据响应在这里创建了一个小提琴http://jsfiddle.net/hiteshpachpor/7dadA/5/ 。该示例使用事件冒泡。

现在这是我面临的问题。$('.jacket').show();每次页面更改/导航时，我都会显示加载程序 ( )。但是如果单击链接，我不希望它显示出来；我想在我的页面上执行其他操作。现在，$('.jacket').hide();在所有此类操作中添加这条线就足够了，但出于扩展的原因，它并不是很理想。

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

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

4

5 回答 5

2

我认为您要实现的是基本的 AJAX 请求？但是你的做法是错误的。您可以改为使用 div 加载请求的页面，然后设置一个ajax 启动处理程序来显示您的加载消息。

您的页面标记看起来像

<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');
});

这是一个示例代码笔

希望这可以帮助

于 2014-04-30T02:27:22.980 回答
0

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

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

于 2014-04-26T14:37:11.203 回答
0

正如评论中提到的那样。但是，我更喜欢事件委托，而不是在整个 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.');
});

更新：

也许您不应该触发$('.jacket').show()“链接”。

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

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

$('.prevent').click(function(event) {
    event.preventDefault();
    $('.jacket').hide();
});
于 2014-04-27T17:14:19.087 回答
0

为此有一个 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 小部件。

于 2014-04-30T04:28:54.153 回答
0

回应您的编辑：

您可以使用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()没有被触发。

于 2014-05-01T00:37:30.637 回答