Question

在我网站的页脚中，我想显示MarineTraffic中的地图，因为该地图加载了大量船图标，并将其定位在该位置，所以即使在我的本地计算机上，它也降低了页面加载速度。该代码正好放在结束的body-tag之前。

可以通过添加一组变量来缩放加载地图所需的代码：

<script> 
width='100%';   // the width of the embedded map in pixels or percentage 
height='300';   // the height of the embedded map in pixels or percentage 
border='1'; // the width of the border around the map (zero means no border) 
shownames='true';   // to display ship names on the map (true or false) 
latitude='51.7143'; // the latitude of the center of the map, in decimal degrees 
longitude='04.0889';    // the longitude of the center of the map, in decimal degrees 
zoom='11';  // the zoom level of the map (values between 2 and 17) 
maptype='0';    // use 0 for Normal Map, 1 for Satellite, 2 for OpenStreetMap 
trackvessel='' //244770624';     MMSI of a vessel (note: vessel will be displayed only if within range of the system) - overrides "zoom" option 
fleet='';   // the registered email address of a user-defined fleet (user's default fleet is used) 
Read more at http://www.marinetraffic.com/en/p/embed-map#6YXCVvOUaBxYHgoT.99
</script>   
<script type="text/javascript" src="https://www.marinetraffic.com/js/embed.js"></script>

克服了页面加载的问题，我想到了在页面加载时加载脚本的想法。已经尝试了异步或延迟，但是这搞砸了功能。

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "http://www.marinetraffic.com/js/embed.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

我对Javascript不太了解，无法弄清楚embed.js脚本为什么不加载。（它也应该在没有变量的情况下加载）。

有人愿意指出正确的方向吗？

Answer 1

我认为您具有此onload脚本来将embed.js加载到头部？这可能是问题所在，因为脚本加载时没有任何body元素。将脚本保留在正文结束之前。

或者您可以尝试：

document.getElementsByTagName('body')[0].appendChild(element);

无论如何，延迟和异步都将执行相同的操作。

编辑：

在页脚或关闭body标签之前，您可以等待页面加载并执行此简单功能。

<script type="text/javascript">

    window.onload = function() {

    var tag = document.createElement('script');

    tag.src = 'http://www.marinetraffic.com/js/embed.js';

    document.body.appendChild(tag);

    }

 </script>

我不知道为什么异步或延迟对您不起作用？也许正在工作？您始终可以检查何时执行代码行。您可以将onload属性或console.log属性用于脚本标签中的alert或tasks: - name: Obtain a list of auto* files in /etc find: path: /etc patterns: "^auto(_|\\.)([a-zA-Z]+\n)" use_regex: yes register: etc_auto_files，以检查何时加载资源。

在页面加载时加载外部JavaScript

1 个答案: