Question

在我的网站中，我有一个下载JSON数据的过程。在这段时间里，我全屏显示一个旋转的div。使用FF和IE，div在开始下载之前可见，但不适用于Chrome和Safari。

这里的JSFiddle链接：https://jsfiddle.net/r6s0cr31/4/，Chrome和Safari的背景颜色没有变化，因为IE＆amp; FF之前的背景颜色变化。

$('#mapLoading').show();
$.ajaxSetup({async: false});
$.getJSON("https://router.project-osrm.org/route/v1/driving/0,40;0,42?overview=full&alternatives=true&steps=true",
   function( response ) {

   }
)
$('#mapLoading').hide();

如果我在getJSON之前在控制台（chrome）中放置一个停止点，我可以看到div正确显示。我尝试在没有JQuery的纯JS中做到这一点，但问题似乎是一样的。

提前感谢您的帮助

Answer 1

你正在使用一个弃用的async false与chrome代码冻结无关，之后ajax调用超时会解决问题

 setTimeout(function () {
$.ajaxSetup({async: false});
$.getJSON("https://router.project-osrm.org/route/v1/driving/0,40;0,42?overview=full&alternatives=true&steps=true",
   function( response ) {

   }
)
$('#mapLoading').hide();
}, 20);

在您的情况下，代码会被执行但在回调后会看到

在这里工作小提琴https://jsfiddle.net/r6s0cr31/5/

Answer 2

而不是使用sync（冻结浏览器），使用异步并在获得响应后隐藏它将解决问题：

$('#btn').click(function(){
    $('#mapLoading').show();
    $.getJSON("https://router.project-osrm.org/route/v1/driving/0,40;0,42?overview=full&alternatives=true&steps=true")
    .then(function(response){
        $('#mapLoading').hide();
    })    
})

https://jsfiddle.net/r6s0cr31/7/

Answer 3

Chrome和Safari似乎首先运行该功能，在执行后重新呈现页面内容。因此没有看到任何变化。

正如Andy Chen已经写过的那样，即使在用户体验方面也最好是异步：

$('#btn').click(function(){
    $('#mapLoading').show();
    $.getJSON("https://router.project-osrm.org/route/v1/driving/0,40;0,42?overview=full&alternatives=true&steps=true",
       function( response ) {

         /* ...code here... */
         $('#mapLoading').hide();
       }
    )
})

Answer 4

感谢您的回复，我了解到： - 没有异步请求冻结Chrome＆amp;苹果浏览器 - Chrome和Safari首先运行该功能，然后更新页面设计。

再次感谢

如何强制刷新Chrome，Safari

4 个答案: