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

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

示例操作:

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

处理前代码

 代码如下 复制代码

<ｓcript type="text/javascript" id="zp_script_33" src="http://mcc.chinauma.net/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="http://mcc.chinauma.net/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="http://mcc.chinauma.net/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="http://mcc.chinauma.net/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="http://mcc.chinauma.net/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="http://mcc.chinauma.net/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="http://mcc.chinauma.net/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="http://mcc.chinauma.net/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);

下面我再给大家介绍看到很多网站使用的是settimeout功能实现页面隐藏显示加载广告，这种办法只是一个假像了js还是同页面一起加载了，但是广告代码确实是延迟加载了这也不是一种简单又比较方便的方法呀。

时间： 2024-07-30 10:57:15

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

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

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

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(加载)事件可以正常响应,一切都正常

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

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

jsp页面中的代码执行加载顺序介绍

 本篇文章主要是对jsp页面中的代码执行加载顺序进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 1. java是在服务器端运行的代码,jsp在服务器的servlet里运行,而javascript和html都是在浏览器端运行的代码.所以加载执行顺序是是java>jsp>js.   2. js在jsp中的加载顺序   页面上的js代码时html代码的一部分,所以页面加载的时候是由上而下加载.所以js加载的顺序也就是页面中<script>标签出现的顺序.<scrip

移动设备的HTML页面中图片实现滚动加载

如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时,要把页面加载完毕,可能就需要10s,20s甚至更多,严重影响用户的体验.针对这样的问题,让页面中的图片滚动加载(图片出现在显示器屏幕上时再加载图片)显得非常重要!这样也可以有效地节省我们服务器的带宽和解决请求大并发的问题. 1.效果图.     这是加载过程中的图片菊花显示            

硕正 表格控件-硕正软件的表格控件能做到页面打开后就立即加载吗

问题描述 硕正软件的表格控件能做到页面打开后就立即加载吗 当一个页面有多个硕正表格控件时,如果不等所有表格全部加载出来,就通过选择按钮加载表格数据,会造成部分未加载出来的表格不能正常插入数据,此时直接保存页面的话会造成数据丢失. 尝试过写js方法将控件在页面标题加载(因为标题是最先加载的)前加载表格控件,但由于表格比较多的时候,加载时间也是比较长的,此时选择操作在表格加载前就进行的话,还是会丢失数据,不知道该怎么办了. 解决方案 http://bbs.csdn.net/topics/391907

jQuery结合AJAX之在页面滚动时从服务器加载数据

  这篇文章主要介绍了jQuery结合AJAX之在页面滚动时从服务器加载数据,文中示例服务器端为C#程序,需要的朋友可以参考下 简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用户滚动滚动条再从服务器端加载. 背景 是Facebook促使我写出了在滚动条滚动时再从服务器加载数据的代码.浏览facebook时,我很惊讶的发现当我滚动页面时,新的来自服

基于JQuery实现滚动到页面底端时自动加载更多信息

 这篇文章主要介绍了基于JQuery实现滚动到页面底端时自动加载更多信息,类似微博,新浪新闻的评论等,都采用了这方法,需要的朋友可以参考下 关键代码:  代码如下: var stop=true;  $(window).scroll(function(){      totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());      if($(document).height() <= tot

页面刷新图片没有重新加载

问题描述 页面刷新图片没有重新加载 我修改了一张图片,但是路径没有发生变化,修改成功后刷新页面图片且没有重新加载.我也试过在src后加随机数,但是没有效果.求大神给个建议 解决方案 是不是缓存没有清理,可以在url后面加?refresh__catch让浏览器刷新缓存试一试_ 解决方案二: 加上随机数没有效果,你是怎么加的?应该加上参数再加随机数,比如www.abc.com/id=1**&rnd=54312334** 如果还不行,就不是缓存的问题,而是你的服务器没有返回修改后的图片,自己检查下 解