javascript - 加载缓慢的div死空间

Question

我有一个包含自定义谷歌地图的 div；加载页面的其余部分需要更长的时间。因此，目前在它完全加载之前它会创建死空间，因此它下面的元素加载时就好像带有谷歌地图的 div 不存在一样 - 直到带有谷歌地图的 div 加载然后它将其下方的元素下推到正确的位置位置。页面加载时看起来很糟糕。

有没有人有解决这个问题的建议？

我尝试在 CSS 中定义维度。

#gmp  {
    background-color: #E5E3DF;
    height: 300px;
    left: 0;
    overflow: hidden;
    position: relative;
    width: 400px;
}


$("#gmp").css("display","block").css("position","absolute")

还尝试过内联定义维度。

Answer 1

是的，您可以为您尝试加载的谷歌地图使用固定的“区域”，然后您可以选择“onLoad”进行 ajax 调用以将我们的 map 加载到您选择的 div 中。

如果有可用的 jquery，你可以这样做:

$(document).ready(function(){
    $('#gmp').load('http://google.com/loadmymap', function() {
       alert('Load was performed.');
    });
});

点这里 http://api.jquery.com/load/

哦，不要让它变得绝对，即不要这样做: $("#gmp").css("显示"," block ").css("位置","绝对") 但只是在原始 css 中显示: block