`

AD最后加载与ready之后加载

JSADready加载 
阅读更多

为了防止广告代码调用的外部文件或外部JavaScript文件因为大小、速度等问题拖累整个网页的加载速度，通常我们将广告代码放到页面最后加载，具体加载位置又可分为 文件末尾 和 等待主页面ready(onload)后加载，通常被我们称作后加载或后载入。以下分别介绍之(以本站使用的天气预报代码作为例子):

1、文件末尾加载

思路：在主页面广告位置预留广告显示位置，加载主页面时暂时不加载广告内容，以防广告内容影响到主页面的加载速度和展现。在最后才加载广告内容，加载完成后再显示到预留位置。

代码

01 在主页面对应位置预留广告位,设置其id为test01，例如
02 <span id="test01" class="testc">&nbsp;</span>
03 然后在文件末尾添加span，其中调用真实的代码，但隐藏不显示
04 <span id="test01_1" style="display:none">
05   <iframe src="http://m.weather.com.cn/m/pn5/weather.htm " width="200"height="20" marginwidth="0" marginheight="0" hspace="0" vspace="0"frameborder="0" scrolling="no"></iframe>
06 </span>
07 然后用以下代码将隐藏的内容替换到主页面预留位置：
08 <script type="text/javascript">
09    function rpad(adName,spanName){
10     document.getElementById(adName).innerHTML = document.getElementById( spanName ).innerHTML;
11     document.getElementById(spanName).innerHTML="";
12   }
13   rpad('test01', 'test01_1');
14 </script>

2、等待主页面ready(onload)之后加载

ready是指的JQuery中的$(document).ready(), onload是指的DOM原生的onload()。两者均是在主页面加载完城后进行，但在不同的浏览器，其执行顺序有差异，在Firefox火狐浏览器中，$(document).ready先于onload执行，而在IE中，顺序刚好相反。

将以下代码保存为html文件，分别在Firefox火狐和IE下运行，即可清晰的看到$(document).ready和onload 2者执行顺序的差异。

01 <html>
02 <head>
03 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
04 <title>$(document).ready和onload测试</title>
05 <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
06 <script type="text/javascript">
07 function load(){
08    $("p").append("<br/>onload开始执行中了");
09    $("p").append("<br/>My onload");
10    $("p").append("<br/>");
11 }
12 $(document).ready(function () {
13     $("p").append("<br/>$(document).ready方法开始执行了");
14     $("p").append("<br/>My $(document).ready");
15     $("p").append("<br/>");
16 });
17 </script>
18 </head>
19 <body onload="load()">
20 <h2>$(document).ready和onload测试</h2>
21 <p>++++++++++++++++++++</p>
22 <br />
23 </body>
24 </html>

好，言归正传，看看等待主页面ready之后加载的代码如何实现：

01 <html>
02 <head>
03 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
04 <title>$(document).ready测试</title>
05 </head>
06 <body>
07 <h2>$(document).ready测试</h2>
08 <p>++++++++++++++++++++</p>
09 <div id="test02" class="textc2">&nbsp;</div>
10 <br />
11 <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
12 <script type="text/javascript">
13 $(document).ready(function () {
14     $("#test02").append('<iframe src="http://m.weather.com.cn/m/pn5/weather.htm" width="200" height="20" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>');
15 });
16 </script>
17 </body>
18 </html>

主页面onload加载

01 <html>
02 <head>
03 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
04 <title>onload测试</title>
05 </head>
06 <body onload="load()">
07 <h2>onload测试</h2>
08 <p>++++++++++++++++++++</p>
09 <div id="test03" class="testc3"></div>
10 <br />
11 </body>
12 </html>
13 <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
14 <script type="text/javascript">
15 function load(){
16    $("#test03").append('<iframe src="http://m.weather.com.cn/m/pn5/weather.htm" width="200" height="20" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>');
17 }
18 </script>

3、定时加载

1 <script language="JavaScript" src="" id="myad"></script>
2 <script>
3      setTimeout("document.getElementById('myad').src='ad.js'; ",6000);//延时6秒
4 </script>

分享到：
| php http_build_query 拼接数组
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    asp.net页面 加载进度条

    在ASP.NET web应用程序中，创建一个页面加载时显示进度条并待数据加载完成后自动隐藏的交互体验，可以显著提升...这个过程涉及到前端与后端的交互，以及对页面生命周期的理解，有助于提升用户在等待数据加载时的体验。

    jquery.ad-gallery.1.2.4圖片幻灯片.zip

    5. **引入JS**：在页面底部加载ad-gallery.js和jQuery库。 6. **初始化插件**：通过JavaScript代码调用AD-GALLERY插件并配置选项。 ```html &lt;!DOCTYPE html&gt; &lt;link rel="stylesheet" href="ad-gallery.css"&gt; ...

    对联式左右广告代码

    这种广告形式常见于各种网站，尤其是一些新闻资讯、博客或者电子商务平台，能够平衡页面内容与广告的展示，提供良好的用户体验。 在源代码层面，实现对联式广告通常涉及HTML、CSS以及可能的JavaScript技术。HTML...

    TengCpDemo

    1. 插屏广告的初始化和加载与开屏广告类似，但需要指定广告位ID和展示时机，通常是在用户操作之间或游戏关卡切换时。 2. Android示例： ```java InterstitialAd interstitialAd = new InterstitialAd("your_...

    jquery点击按钮显示广告5秒自动消失

    其中，`$(document).ready()` 确保在所有 DOM 元素加载完毕后才执行 JavaScript 代码，避免了因元素未加载而导致的错误。`on('click', function() {...})` 是 jQuery 中的事件绑定，用于监听按钮的点击事件。`...

    门户网站jquery广告控制flash或图片顶部广告显示隐藏

    `show()`和`hide()`方法则可以实现元素的显示与隐藏，比如`$("#adBanner").show()`用于显示广告，`$("#adBanner").hide()`则用于隐藏。 2. **条件判断**：在广告控制中，我们可能需要根据特定条件决定是否显示广告...

    可关闭对联广告代码

    6. **性能优化**：为了避免广告加载影响页面的整体加载速度，可以使用异步加载技术，例如，使用`async`或`defer`属性加载JavaScript，或者使用懒加载（lazy loading）技术只在用户滚动到广告区域时才加载广告内容。...

    jquery实现的文字推荐广告代码(js+css)

    $(document).ready(function() { adBox.fadeIn(); // 淡入显示广告 }); ``` CSS则用于美化和控制元素的布局与动态效果。在文字推荐广告中，我们可能需要定义文字的样式，如字体、颜色、大小和对齐方式，以及设置...

    jQury右下角弹出广告窗口

    当页面加载完成时，我们希望在右下角弹出广告窗口，可以使用`$(document).ready()`函数： ```javascript $(document).ready(function() { // 获取屏幕宽度和高度 var screenWidth = $(window).width(); var ...

    swift-两行代码添加iOS应用启动广告的功能

    这里我们以AdMob为例进行讲解，因为它是Google提供的广泛使用的广告平台，且与Swift和iOS开发兼容性良好。 1. **集成AdMob SDK** 在Xcode项目中，你需要通过CocoaPods或Carthage管理依赖。创建Podfile文件，然后...

    jquery广告源码

    可以使用`.ready()`或`.on('load')`确保页面内容加载完毕后再执行广告脚本，防止阻塞页面渲染。另外，使用`.hover()`监听用户的鼠标悬停事件，可以实现更精细的交互控制，如暂停或改变广告动画。 最后，为了跟踪...

    应用源码有米广告SDK例子.zip

    接下来，我们需要在AndroidManifest.xml中添加必要的权限，比如互联网权限，因为广告加载和展示都需要网络支持： ```xml ``` 然后，我们需要在Activity或Fragment中初始化有米广告SDK，并设置监听器以获取广告...

    jQuery可关闭全屏广告代码

    $(document).ready(function() { // 显示广告 $('#fullscreen-ad').fadeIn(); // 监听关闭按钮点击事件 $('#close-ad').on('click', function() { $('#fullscreen-ad').fadeOut(); }); }); ``` 这段代码的...

    jquery click方法制作性感的女性图片广告代码下载

    我们将在jQuery的click事件处理程序中控制它们的显示与隐藏。 现在，我们用jQuery来绑定click事件。在页面加载完成后，我们选择一个元素（例如，一个按钮），并为其添加事件监听器： ```javascript $(document)....

    常见的网页浮动广告代码

    $(document).ready(function() { $('#trigger').click(function() { $('#floatingAd').slideToggle(); }); }); ``` 6. **固定在底部的广告**：使用CSS的`position: fixed`属性，使广告始终位于浏览器窗口的...

    弹出广告并自动收起jQuery特效代码.zip

    在上面的代码中，`$(document).ready`确保所有DOM元素加载完毕后执行。`$("#ad-banner").removeClass("hidden")`移除隐藏类，使得广告可见。`setTimeout`函数在2000毫秒（即2秒）后执行匿名函数，`slideUp`方法则是...

    jQuery右下角pop弹窗漂浮广告代码，兼容主流浏览器.rar

    $(document).ready(function() { // 初始状态，弹窗隐藏 $('#popup-ad').hide(); // 页面加载后延迟一段时间显示弹窗 setTimeout(function() { $('#popup-ad').fadeIn(); }, 2000); // 2秒后显示 // 点击...

    Android腾讯广告集成之初级篇Demo

    集成插屏广告的步骤与开屏类似，但需要在合适的地方展示和隐藏广告： ```java // 创建插屏广告对象 GDInterstitialAd interstitialAd = new GDInterstitialAd(context, adUnitId); interstitialAd.setAdListener...

    macios自定义驱动中文说明.pdf

    文件提到了一系列与macOS操作系统定制相关的技术，比如“iDenebEssentialSystem”和“iDenebPatches10.5.7Ready”，这表明文档主要针对macOS的某些版本进行定制，特别是与iDeneb发行版有关的定制工作。 ### 2. 启动...

    jQuery网站顶部定时折叠收起广告代码，五秒钟后自动收起，适合活动或通知在网站顶部满屏展示，兼容主流浏览器.rar

    2. **编写JavaScript代码**：接下来，我们创建一个`$(document).ready`函数，确保在页面完全加载后执行我们的代码。在这个函数内部，我们将使用`setTimeout`函数来设定五秒钟后执行广告折叠的函数。 ```javascript ...

Magicbox
Global site tag (gtag.js) - Google Analytics