JS延迟加载加快页面打开速度示例代码


Posted in Javascript onDecember 30, 2013

第一,JS延迟加载

代码如下:

<script language="JavaScript" src="" id="my"></script> 
<script language="JavaScript"> 
setTimeout("document.getElementById('my').src='include/...文件...php'; ",3000);//延时3秒 
</script>

第二,JS最后加载

在需要插入JS的地方插入以下代码:

<SPAN id=L4EVER>LOADING...</SPAN>

当然,那个LOADING…你可以换成自己喜欢的小图片.看起来很有AJAX效果呢.

然后在页面最底端插入:

<SPAN class=spanclass id=AD_L4EVER> 
你的JS代码在这里!</SPAN> 
<script>L4EVER.innerHTML=AD_L4EVER.innerHTML;AD_L4EVER.innerHTML="";</script>

第三,JS最后加载

想要显示广告的位置
<div id="guangg1"></div>

想要显示的广告内容

<div id="ggad1" style="display:none"> 
<script language="javascript" src="/include/.......js"></script> 
</div>

判断要显示的广告位置是否存在
<script language="javascript"> 
function chkdiv(divid){ 
var chkid=document.getElementById(divid); 
if(chkid != null) 
{return true; } 
else 
{return false; } 
} 最后就是显示广告了 
if (chkdiv('guangg1')) { 
document.getElementById('guangg1').innerHTML= document.getElementById('ggad1').innerHTML; 
document.getElementById('ggad1').innerHTML=""; 
} 
</script>

setTimeout用法

setTimeout的标准语法是: setTimeout(表达式,时间(毫秒)) 两个参数.

在这里着重记下第一个参数是一个 function时的调用,假设是一个函数.

1.函数无参:

function alertV(){ alert("000"); }

当第一个参数不加引号("" 或 '')时,延迟一秒:
setTimeout(alertV,1000);

当第一个参数加上又引号时,延迟一秒:
setTimeout("alertV()",1000);

2. 函数有参:

function alertV(event){ alert("keyCode="+event.keyCode); }

此时应设置成:
setTimeout(function(){alertV(event);},1000); 不然会提示参数未定义.

Javascript 相关文章推荐
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
百度地图自定义控件分享
Mar 04 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
JavaScript原型式继承实现方法
Nov 06 Javascript
深入理解javascript中return的作用
Dec 30 #Javascript
禁止IE用右键的JS代码
Dec 30 #Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 #Javascript
JS的document.all函数使用示例
Dec 30 #Javascript
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 #Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 #Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
Dec 30 #Javascript
You might like
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
php解析xml方法实例详解
2015/05/12 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
python新手学习可变和不可变对象
2020/06/11 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
体育教育毕业生自荐信
2013/11/21 职场文书
自荐书格式
2013/12/01 职场文书
仓库主管的岗位职责
2013/12/04 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
python实现图片批量压缩
2021/04/24 Python
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技