javascript 广告后加载，加载完页面再加载广告

一、背景简介

当我们打开一个网页的时候，往往会看到很多广告，如果所有广告都是一次性全部加载，那么页面的加载速度就会很慢。为了解决这个问题，我们可以将广告的加载放到页面加载完成之后再进行加载，这就是所谓的“javascript 广告后加载”。

二、实现步骤

1. HTML 代码编写

首先，我们需要在 HTML 代码中添加广告的框架代码。例如：

<div id="advertisements"></div>

这个div标签就是我们后面要插入广告的容器。

1. javascript 代码编写

接下来，在 javascript 代码中编写广告的加载函数。这里我们可以用到 jQuery 的 $.get() 函数来实现异步加载广告的目的。示例代码如下：

$(document).ready(function() {
    $.get("http://adserver.example.com/advertisement", function(data) {
        $("#advertisements").html(data);
    });
});

这里的 $.get() 函数会向指定的地址发送 GET 请求，并在请求完成后执行回调函数。回调函数中的 data 参数就是广告的 HTML 代码，我们可以通过 $("#advertisements").html(data) 将广告插入到页面中指定的容器中。

三、代码示例

1. 示例一：使用图片作为广告素材

HTML 代码：

<div id="advertisements"></div>

javascript 代码：

$(document).ready(function() {
    $.get("http://adserver.example.com/advertisement", function(data) {
        var image = new Image();
        image.onload = function() {
            $("#advertisements").html("<a href='" + data.link + "'><img src='" + data.imageUrl + "'></a>");
        };
        image.src = data.imageUrl;
    });
});

这里的广告数据包含一个图片链接和一个跳转链接。我们首先通过创建new Image()来异步加载图片，等图片加载完成后再将其插入到页面中。

1. 示例二：使用 iframe 加载广告内容

HTML 代码：

<div id="advertisements">
    <iframe src="http://adserver.example.com/advertisement"></iframe>
</div>

javascript 代码：

$(document).ready(function() {
    $("#advertisements iframe").on("load", function() {
        $(this).css("height", $(this).contents().height() + "px");
    });
});

这里的广告数据包含一个网页链接，我们将其放到一个 iframe 中进行加载。在页面加载完成后，我们可以通过 $("#advertisements iframe").on("load", function() {...}) 监听 iframe 的加载事件，并在加载完成后调整 iframe 的高度，保证广告内容完全展示。

四、总结

要实现 javascript 广告后加载，我们需要编写异步加载广告的 javascript 代码，并将广告内容插入到指定的容器中。在具体实现中，我们可以根据广告的内容选择不同的加载方式，例如使用图片、iframe 或者直接插入 HTML 代码等。