js实现网页延迟加载之外部js加载

我们的实际业务中，很多第三方资源的代码,像广告代码，一般情况这种的代码不是在首屏，所以一般做的功能是都可以做延尽加载

示例操作:
这些块广告位占了了26个链接，很80%的用户不会滚到下面.

处理前代码

 代码如下 复制代码

<ｓcript type="text/javascript" id="zp_script_33" src="外部js地址/static/scripts/p.js?id=33&w=230&h=60&sl=1&delay=5" zp_type="1"></ＳCRIPT>
<ｓcript type="text/javascript" id="zp_script_34" src="外部js地址/static/scripts/p.js?id=34&w=230&h=60&sl=1&delay=5" zp_type="1"></ＳCRIPT>
<ｓcript type="text/javascript" id="zp_script_35" src="外部js地址/static/scripts/p.js?id=35&w=230&h=60&sl=1&delay=5" zp_type="1"></ＳCRIPT>
<ｓcript type="text/javascript" id="zp_script_36" src="外部js地址/static/scripts/p.js?id=36&w=230&h=60&sl=1&delay=5" zp_type="1"></ＳCRIPT>

处理后代码

利用 textarea 本身的特点，让页面直接加载外部资源

 代码如下 复制代码

<TEXTAREA class=gs_async><script type="text/javascript" id="zp_script_33" src="外部js地址/static/scripts/p.js?id=33&w=230&h=60&sl=1&delay=5" zp_type="1"></script></TEXTAREA>
<TEXTAREA class=gs_async><script type="text/javascript" id="zp_script_34" src="外部js地址/static/scripts/p.js?id=34&w=230&h=60&sl=1&delay=5" zp_type="1"></script></TEXTAREA>
<TEXTAREA class=gs_async><script type="text/javascript" id="zp_script_35" src="外部js地址/static/scripts/p.js?id=35&w=230&h=60&sl=1&delay=5" zp_type="1"></script></TEXTAREA>
<TEXTAREA class=gs_async><script type="text/javascript" id="zp_script_36" src="外部js地址/static/scripts/p.js?id=36&w=230&h=60&sl=1&delay=5" zp_type="1"></script></TEXTAREA>

写个插件来处理, 基于jquery

 代码如下 复制代码

(function ($) {
    /**
    * script dom 节点异步加载
    */
    $.fn.scriptNodeAsync = function (opts) {
        opts = $.extend({
            'color': '#fff'
            , top: 0
        }, opts);
        //把 dom节点解析成数组结构
        function str_dom(node) {
            node = node.replace('<SCRIPT', node="$.trim(node.replace('" ??);></script>', ''));
            var attr = node.split(' ');
            var k = [], v = [], i = 0;
            var re = /(.*?)="(.*?)"/i;
            var script = document.createElement('script');
            script.async = true;
            for (i in attr) {
                var temp = attr[i].match(re);
                script.setAttribute(temp[1], temp[2]);
            }
            return script;
        }
        return this.each(function () {
            var $this = $(this);
            var $frame = $(this).parent();
            var old_node = $.trim($(this).val());
            var scriptNode = str_dom(old_node);
            var textarea = $this[0]; //转化为原生对像
            textarea.parentNode.insertBefore(scriptNode, textarea);
            $this.remove();
        });
    };

    //启动代码
    $(function () {
        //判断是否显示
        function setPos() {
            var _height = document.documentElement.clientHeight;
            var _scrollTop = $(window).scrollTop();
            $('textarea.gs_async').each(function (i) {
                var _top = $(this).parent().offset().top; //当前节点是隐藏的
                var _view = _scrollTop + _height; //当前可视高度
                if (_view > _top) {
                    $(this).scriptNodeAsync(); //启动插件
                }
            });
        }

        var throttled = GS.throttle(setPos, 1000); //节流函数_来源于common/js/gs_base.js
        $(window).scroll(throttled);

    });

})(jQuery);
时间： 2024-07-30 10:57:19

js实现网页延迟加载之外部js加载的相关文章

js实现页面延迟加载之外部js加载

我们的实际业务中,很多第三方资源的代码,像广告代码,一般情况这种的代码不是在首屏,所以一般做的功能是都可以做延尽加载 示例操作: 这些块广告位占了了26个链接,很80%的用户不会滚到下面. 处理前代码  代码如下 复制代码 <script type="text/javascript" id="zp_script_33" src="http://mcc.chinauma.net/static/scripts/p.js?id=33&w=230&a

javascript-异步加载js的问题，为什么能异步加载

问题描述 异步加载js的问题,为什么能异步加载 这是高性能js的一个例子,为什么没有设置async属性为true就能实现异步下载? var script = document.createElement ("script"); script.type = "text/javascript"; script.src = "file1.js"; document.getElementsByTagName_r("head")[0].

Ajax bootstrap美化网页并实现页面的加载删除与查看详情

Bookstrap:美化页面: Bootstrap是Twitter推出的一个开源的用于前端开发的工具包. 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架. Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成. Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目. 只需要引用一些定义好的类,

android webview https网页中的http图片加载不出来

问题描述 android webview https网页中的http图片加载不出来 RT,在项目中用webview加载一个https开头的网页,网页加载出来了,但网页里http开头的图片在android 4.4的手机上能加载出来,在android5.0.1 的手机上就加载不出来. android 5.0.1:The page at 'https://api.app-test.cn/activity/view?id=25' was loaded over HTTPS but displayed i

js怎么判断flash swf文件是否加载完毕_javascript技巧

js怎么判断flash是否加载完毕了呢? 我们怎么在flash加载完毕之时,回调一个我们设定的js函数? 这个问题,一直困扰了我很久,直到今天,请教了一个非常牛B的人物之后,突然来了感觉! 呵呵,也许,这个问题在你们看来不是问题,不过对于我来说,确实是个问题,因为我一直不知道该怎么判断swf文件是否加载完毕了? 从前都是只知道img.onload等等. 好了,言归正传,我们到底该怎样判断一个flash是否加载完了呢? 没错,就是轮询,然后判断flash的某个方法是否能正常运行? 示例如下(伪代码

js怎么判断flash swf文件是否加载完毕

js怎么判断flash是否加载完毕了呢? 我们怎么在flash加载完毕之时,回调一个我们设定的js函数? 这个问题,一直困扰了我很久,直到今天,请教了一个非常牛B的人物之后,突然来了感觉! 呵呵,也许,这个问题在你们看来不是问题,不过对于我来说,确实是个问题,因为我一直不知道该怎么判断swf文件是否加载完毕了? 从前都是只知道img.onload等等. 好了,言归正传,我们到底该怎样判断一个flash是否加载完了呢? 没错,就是轮询,然后判断flash的某个方法是否能正常运行? 示例如下(伪代码

IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载)，按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取

兼容问题1: 页面的分享等插件加载不全,并无法点击. 兼容问题2: IE下页面选择器(#id..class.etc.)绑定click事件无法访问到,后台springmvc方法,也无法获取ajax的success方法返回值data. 兼容问题3: 在IE和Google下能够获取,ajax的success返回的数据data,但firefox下获取不到. 兼容问题4: 页面跳转,或url进入,js代码不能正确执行,如果按了F12后(开启F12),JavaScript(加载)事件可以正常响应,一切都正常

基于iscroll.js实现下拉刷新和上拉加载效果_javascript技巧

现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于H5来实现. 先看下运行效果: 是不是有点小小的'鸡冻' ,它就是由我们今天要介绍的主人公'iscroll.js'实现的,接下来我以最最简便的方式教给大家~~ 实现步骤 一.准备好iscroll.js库 到官网下载即可: https://github.com/cubiq/iscroll 二.搭建页面结构 &l

js点击文本框后才加载验证码实例代码_javascript技巧

经常到各大网站去留言或者发帖的朋友应该知道现在很多网站的留言地方的验证码不是直接显示的.而是在点击验证码输入框之后才会显示出来验证码的.下面作者也总结了一篇关于如何利用js实现点击文本框然后再加载验证码的效果的. 废话不多说了,下面是具体的实现代码. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title