jquery移动同页应用程序与装载机

Posted 2021-05-06

我面临的挑战是我正在构建一个使用jQuery mobile的Cordova应用程序，并且我使用单页面应用程序方法来实现许多功能。

因此，当我选择一个页面时，我会使用来自aJax调用的内容动态填充该页面。但是，页面已经打开并且空白，直到返回aJax调用。如何放置加载屏幕直到aJax返回。

请参阅下面的示例代码

#loading-img {
        background: url(http://preloaders.net/preloaders/360/Velocity.gif) center center no-repeat;
        height: 100%;
        z-index: 20;
    }

    .overlay {
        background: #e9e9e9;
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0.5;
    }

CSS

<a href="#profilepageself" class="leavingChatPage" id="goToProfile" >Profile</a>

加载我的页面的链接

$("#goToProfile").on("click",function(event){
    $(".overlay").show();
    console.log("going to profile");
});

我想上面的JS会在点击链接时触发，并会模糊一切。

$.get( url, function( data ) {
     $.each(data.items, function (index, event) {
         console.log('founda practice %o',event);
         //create my html
         ..........

     });
     $(".overlay").hide();
});

然后一旦aJax返回我就会隐藏它。

这似乎根本不起作用。不知道为什么。

答案

你可以使用.always回调：

$.get(url, function(data) {
    $.each(data.items, function(index, event) {
      console.log('founda practice %o', event);
      //create my html
      ..........
    });
  })
  .always(function() {
    $(".overlay").hide();
  });

这里是参考：https://api.jquery.com/jquery.get/

此外，jQuery.get()只是Ajax的简写，你也可以在ajax调用中打开和关闭你的加载器，如下所示：

 $.ajax({
   beforeSend: function(){
     $(".overlay").show();
   },
   success: function(data){
     $.each(data.items, function (index, event) {
       console.log('founda practice %o',event);
       //create my html
       ..........
     });
   },
   complete: function(){
     $(".overlay").hide();
   }
 });

顺便说一句，你知道jQuery Mobile有自己的加载器吗？

这是演示：http://demos.jquerymobile.com/1.4.5/loader/

如果您想要更好的Velocity.gif，只需将其重命名为ajax-loader.gif并覆盖默认的JQM文件（您将在CSS/images文件夹中找到它）。然后，您可以根据需要设置样式并使用标准JQM功能：

$.mobile.loading("show");
$.mobile.loading("hide");

这样，您甚至不需要创建叠加层，因为它已经内置在JQM中（请查看演示）。