外部JS的阻塞下载
通常javaScript文件的加载会占用网页中其他元素的下载资源,在一些特别追求Web应用响应速度而且JavaScript文件并不那么小的时候,可以考虑使用异步加载JavaScript的方法来避免影响正常内容的加载进程
有人会问:为什么JS不能像css、image一样并行下载了?这里就不介绍了,有兴趣的同学可以去查看下这篇文章高性能web开发 - 如何加载JS,JS应该放在什么位置?
异步加载的思路很简单:
- 创建一个script的DOM节点;
- 对其的type属性赋值为text/javascript;
- 再指定它的src属性为要加载的js文件URL;
- 把这个DOM节点加入到页面中。
方法一:
function include_js(path,reload)
{
var scripts = document.getElementsByTagName("script");
if (!reload)
for (var i=0;i<scripts.length;i++)
if (scripts[i].src && scripts[i].src.toLowerCase() == path.toLowerCase() ) return;
var sobj = document.createElement('script');
sobj.type = "text/javascript";
sobj.src = path;
var headobj = document.getElementsByTagName('head')[0];
headobj.appendChild(sobj);
}
本函数可以用于一些广告和统计的js文件异步加载,避免了因加载js文件而造成的网页显示速度慢的问题。
但是这样当加载的js文件含有document.write语句时,在IE下没有反应,但在Mozilla Firefox 下就会让你原来的网页消失,只显示document.write出来的内容.对此问题一网友给出了一种比较好的解决办法,当然是重写document.write方法:
有一个可以让document.write信息显示出来的方法:
先在网页中需要显示write出来的内容的地方加入一个div标签:
然后在include_js之前加上这句:
document.write = function (s)
{
document.getElementById('jsdiv').innerHTML+=s;
return false;
}
方法二:
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others: Firefox, Safari, Chrome, and Opera
script.onload = function(){
callback();
};
}
script.src = url;
document.body.appendChild(script);
}
使用时,只要简单地传递JavaScript文件的URL和回调函数即可:
01 |
var MiniSite= new Object();
|
03 |
ie:/msie/.test(window.navigator.userAgent.toLowerCase()), |
04 |
moz:/gecko/.test(window.navigator.userAgent.toLowerCase()), |
05 |
opera:/opera/.test(window.navigator.userAgent.toLowerCase()), |
06 |
safari:/safari/.test(window.navigator.userAgent.toLowerCase()) |
09 |
load: function (sUrl,fCallback){
|
10 |
var _script=document.createElement( 'script' );
|
11 |
_script.setAttribute( 'charset' , 'gb2312' );
|
12 |
_script.setAttribute( 'type' , 'text/javascript' );
|
13 |
_script.setAttribute( 'src' ,sUrl);
|
14 |
document.getElementsByTagName( 'head' )[0].appendChild(_script);
|
15 |
if (MiniSite.Browser.ie){
|
16 |
_script.onreadystatechange= function (){
|
17 |
if ( this .readyState== 'loaded' || this .readyState== 'complete' ){
|
21 |
} else if (MiniSite.Browser.moz){
|
22 |
_script.onload= function (){
|
使用方法:
会jQuery 的同学可以直接使用jq的$.getscript()方法来使用异步加载
参考文章:
Script 元素的异步加载属性
JS版include函数 实现异步加载Google广告
分享到:
相关推荐
3. **异步加载**:为了不影响页面的加载速度,JS广告代码通常采用异步加载。这可以通过`async`或`defer`属性实现,确保广告资源在不影响页面主内容加载的情况下逐步加载。 4. **广告轮播**:对联广告可能包含多个...
在“js头部广告代码”这个主题中,我们将探讨如何使用JavaScript来实现网页头部的广告展示,以及相关的技术要点。 首先,我们要明白在HTML文档中,头部(`<head>`标签)通常包含元信息,如CSS样式表链接、脚本链接...
3. **异步加载**:为了优化网页性能,广告通常采用异步加载,避免阻塞页面主要内容的显示。`XMLHttpRequest`或现代的`fetch API`可以实现数据的异步获取,然后在回调函数中插入广告内容。 4. **广告轮播**:网页...
2. 异步加载:为了提高用户体验,广告通常使用异步加载技术,避免阻塞页面渲染。通过JavaScript,可以设置事件监听器,在页面加载完成后或特定条件满足时加载广告。 3. 广告网络API:许多广告平台提供了JavaScript ...
6. **异步加载**:为了不影响网页的加载速度,广告通常采用异步加载方式。这样,即使广告未加载完成,用户也能先看到网页的其他内容。 7. **广告内容的动态生成**:百度广告可能包含动态内容,如实时数据、个性化...
本资源“35个js广告代码汇集”集合了多种类型的JavaScript广告实现,涵盖了普通、Flash以及图片等多种形式,旨在帮助开发者更好地理解和运用JavaScript来创建吸引人的广告展示。 1. **JavaScript广告基础**:...
asp广告与弹窗代码"涵盖的知识点包括ASP与数据库交互、服务器端逻辑、客户端脚本(JavaScript、jQuery)、广告轮播机制、随机算法、追踪统计、弹窗实现(JavaScript弹窗、服务器端判断、异步请求、CSS模拟、第三方库...
本资源"阿里妈妈网站顶部基于js的banner广告代码.rar"提供了一种实现这种广告展示的技术方案,主要基于JavaScript这一强大的客户端脚本语言。 JavaScript,简称JS,是Web开发中的核心技术之一,它主要用于网页动态...
- 为了减少页面加载时间,可以使用异步加载广告代码,防止阻塞页面渲染。 - 延迟加载(Lazy Loading)技术可以只在广告即将进入视口时才加载,提高用户体验。 5. **广告跟踪与统计**: - JS可以用来记录广告的...
6. **性能优化**:为了避免广告加载影响页面的整体加载速度,可以使用异步加载技术,例如,使用`async`或`defer`属性加载JavaScript,或者使用懒加载(lazy loading)技术只在用户滚动到广告区域时才加载广告内容。...
首先,文件内容提到了网站中常加载的一些JavaScript代码,比如网站统计代码、广告代码(如Google广告、百度联盟、阿里妈妈广告)等。这些脚本虽然能够为网站带来收益或分析数据,但也会导致页面加载速度变慢。 文件...
5. **AJAX异步加载**:如果广告内容较多,为了提高页面加载速度,开发者可能会使用AJAX异步加载技术,只在需要时加载广告内容,提升用户体验。 6. **性能优化**:考虑到广告代码可能会影响网站整体性能,开发者会...
腾讯首页的伸缩广告是一种常见的在线广告形式,它利用JavaScript技术来实现动态展示,吸引用户的注意力,同时提高广告的互动性和用户体验。这种广告通常会在页面加载后以动画效果出现,或者在用户滚动页面时适时展现...
开发者需要注意使用语义化的HTML元素,遵循W3C的HTML和CSS规范,同时减少不必要的HTTP请求,优化图片大小,以及利用缓存和异步加载技术提高页面性能。 文件名"符合web标准且可单独关闭的"暗示了压缩包中可能包含...
8. **性能考虑**:为了不影响页面加载速度,漂浮广告的JavaScript代码通常会放在页面底部,或者使用异步加载方式。此外,优化图片大小和压缩CSS、JavaScript文件也是提升网站性能的重要步骤。 9. **广告跟踪**:...
1. **追踪脚本**:一般使用JavaScript代码插入到网页中,以收集用户行为数据,如Google Analytics或自定义的追踪代码。 2. **事件追踪**:用于记录用户在网页上的交互,比如点击按钮、观看视频等。 3. **页面标记*...
6. **图表绘制**:JavaScript库如Chart.js和D3.js能帮助我们创建各种统计图表,如柱状图、饼图、折线图,用于数据可视化。 7. **动画效果**:通过CSS3动画和JavaScript的setTimeout、requestAnimationFrame等函数,...
在实际应用中,广告轮换通常会涉及到更复杂的逻辑,包括但不限于广告选择策略(随机、优先级、权重等)、数据统计(展示次数、点击率等)、广告加载优化(异步加载、延迟加载等)。此外,现代的广告管理系统(如 ...
这个系统允许在网页内容中无缝插入广告,提高用户交互性,同时减少页面刷新,提升网站性能。 ASP.NET 3.5是微软.NET框架的一个版本,提供了丰富的服务器控件、数据绑定、事件处理等特性,便于快速构建Web应用程序。...