时间:2021-03-14加入收藏
如果网络不够流畅,广告还没显示就可能会让网站访客先看到这张背景图。因此现在有一个新的需求就是希望这张背景图片可以稍微延迟点显示,给广告的显示预留更多的时间。也就是尽量让访客在显示广告前不会看到这张背景图。<div class="adstest" style="height:200px;background:#ffffff url(https://tva1.sinaimg.cn/large/6a269efcly1gl65bgcc4gj208b05kdfo.jpg) no-repeat;">
<!-- 广告代码 -->
</div>
这个函数的使用方法也比较简单,把它放在 JavaScript 的最顶部,然后在下面编写功能函数,如果需要将某个功能函数使用这种方法加载,就可以把函数名作为参数调用这个自定义的 addLoadListener 。代码如下:function addLoadListener(fn){
if (typeof window.addEventListener != 'undefined'){
window.addEventListener('load',fn,false);
}else if(typeof document.addEventListener != 'undefined'){
document.addEventListener('load',fn,false);
}else if (typeof window.attachEvent != 'undefined'){
window.attachEvent('onload',fn);
}else{
var oldfn = window.onload;
if(typeof window.onload != 'function'){
window.onload = fn;
}else{
window.onload = function(){
oldfn();
fn();
};
}
}
}
这样,就实现了页面加载完成之后处理多个函数了。addLoadListener(func);
function func() {...}
然后使用jQuery来动态设置背景图即可。<div id="adstests">
<!-- 广告代码 -->
</div>
<script>
... 省略代码 ...
function func() {
$("#adstests").attr("style","min-height:200px;background:#ffffff url(https://tva1.sinaimg.cn/large/6a269efcly1gl65bgcc4gj208b05kdfo.jpg) no-repeat;");
}
</script>
TGA: 技巧