用js的document.write输出的广告无阻塞加载的方法

作者：海风 | 来源：互联网 | 2022-09-20 03:22

这篇文章主要介绍了用js的document.write输出的广告无阻塞加载的方法,需要的朋友可以参考下

一、广告代码分析

很多第三方的广告系统都是使用document.write来加载广告，如下面的一个Javascript的广告链接。

代码如下:

延迟加载script并重写document.write，下面是代码实现：

代码如下:

/**
* 重写document.write实现无阻塞加载script
* @param { Dom Object } textarea元素
*/
var loadScript = function( elem ){
var url = elem.value.match( /src="([\s\S]*?)"/i )[1],
  parent = elem.parentNode,
  // 缓存原生的document.write
  docWrite = document.write,
  // 创建一个新script来加载
  script = document.createElement( 'script' ),
  head = document.head ||
   document.getElementsByTagName( 'head' )[0] ||
   document.documentElement;

// 重写document.write
document.write = function( text ){
  parent.innerHTML = text;
};

script.type = 'text/Javascript';
script.src = url;

script.Onerror=
script.Onload=
script.Onreadystatechange= function( e ){
  e = e || window.event;
  if( !script.readyState ||
  /loaded|complete/.test(script.readyState) ||
  e === 'error'
  ){

   // 恢复原生的document.write
   document.write = docWrite;
   head.removeChild( script );

   // 卸载事件和断开DOM的引用
   // 尽量避免内存泄漏
   head =
   parent =
   elem =
   script =
   script.Onerror=
   script.Onload=
   script.Onreadystatechange= null;

}
}

// 加载script
head.insertBefore( script, head.firstChild );
};

四、图片延迟加载的增强版

实现了无阻塞式的延迟加载Javascript广告代码，能否进一步优化？如果广告没在首屏出现，能否像通常的图片的延迟加载一样来进行延迟加载？答案是肯定的。对我之前写的图片延迟加载的小插件进行扩展，将原来的图片加载方式(替换src)改成上面的loadScript方式加载就可以实现。当然，仅仅是这样的修改还是会有问题的。如果有多个图片，并且loadScript是同时进行的，而document.write又是全局的方法，保不准在加载A的时候不影响到B，必须让它们一个个的按顺序加载，加载完A之后才能加载B。

五、队列控制

为了让Javascript广告代码按顺序加载就需要一个队列来控制加载。于是又有了下面这段简单的队列控制代码：

代码如下:

var loadQueue = [];
// 入列
var queue = function( data ){
 loadQueue.push( data );
 if( loadQueue[0] !== 'runing' ){
  dequeue();
 }
};
// 出列 
var dequeue = function(){
 var fn = loadQueue.shift();
 if( fn === 'runing' ){
  fn = loadQueue.shift();
 }

 if( fn ){
  loadQueue.unshift( 'runing' );
  fn();
 }
};