本页二维码,扫一扫分享到朋友圈
朋友圈

异步加载javascripot脚本解决方案


阅读199 评论0 赞 43返回首页    go 编程与技术  go javascript


前言

主要说说异步加载脚本的解决方案。


意义

异步加载脚本的意义是什么?如果我们的脚本未完全加载成功,浏览器就会一直处于忙碌状态,也就是说页面上的小圈会一直转。这很影响用户体验,所以我们需要将一部分脚本偷偷地加载,又不能让浏览器和用户知道。


解决方案

第一种方法

1

2

3

4

5

6

setTimeout(function(){

vars =document.createElement('script');

s.src ="/will-not-stop-loading.js";

document.body.appendChild(s);

});

该函数会被插入到执行队列的末尾,这时浏览器忙的提示已经消失,但是脚本却还在加载。然而这种方法在chrome中并不能逃过法眼。

第二种方法

通过ajax,将脚本从后端获取,再通过eval来执行。

1

2

3

4

<script type="text/defered-script"data-src="http://foo.com/bar.js">

$('[type="text/defered-script"]').each(function(idx, el){

$.get(el.dataset.src,eval);

});

这是一种行之有效的方法,但是有一个缺点,就是不能使用当前路径,因为在eval中,当前路径变成也页面所在路径,不再是script标签中src所指路径。

第三种方法

禁止浏览器忙指示器的关键在于让DOM加载完毕。

1

2

3

4

5

6

7

8

9

$(window).load(function(){

$('script[type="text/defer-script"]').each(function(idx, el){

var$script = $('<script>');

if(el.dataset.src) $script.attr('src', el.dataset.src);

else$script.html(el.text);

$script.appendTo('body');

el.remove();

});

});

这种方法最优。


  上一篇:go 简单的ajax轻库
  下一篇:go 浏览器高性能滑动解决方案(javascript)


评论


用QQ登录管理/创建网站 用微博登录管理/创建网站   发布于:11-19