在下拉菜单中应用jQuery.get（）

Question

所以，我有一个使用<ul> <li> menu </li> <ul>的下拉菜单。

现在，其中一个项目的文件很大，我正在考虑应用jQuery.get（）来减少加载量和速度，直到它被点击为止。

所以，例如，我有以下菜单：

 <ul>
    <li>
       <button type="button">
         <div class="_menu_title">Map</div>     
       </button>
       <ul class="dropdown_menu_sub">
          <li class="dropdown_menu_sub_list">
                <div class="google_map"> Google map content goes here </div>                    
          </li>
      </ul>
   </li>
</ul>

此处，当点击Map按钮时，谷歌地图将显示在菜单中。但是，我注意到它减慢了负载，所以我想除非点击Map按钮，否则我不想加载地图内容。

如何应用加载屏幕（向用户提供反馈信息），然后使用jQuery.get（）加载内容？

Answer 1

您可以在默认情况下添加loading-img，并使用jQuery＆＃39; s .get() - 函数的回调函数在加载所有数据时隐藏它：

$.get("/echo/html/", function (data) {
    $(".google_map").html(data);
    $('.dropdown_menu_sub_list > img').hide();
});

<强> Demo

注意：错误处理会很好，因为如果无法加载资源，加载图像就会停留在那里。

Answer 2

试试这个：

$("button").click(function(){
    //show loader here
    $('.google_map').html('loading image');
    $.get("/html/", function(data, status){
        if(status == "success"){
            //remove loader here and keep map data in google_map
            $('.google_map').html(data);
        }
    });
});