精华内容
下载资源
问答
  • 然后,您可以使用eleventy-load选项中的规则来设置eleventy-load-js。 module . exports = function ( eleventyConfig ) { eleventyConfig . addPlugin ( require ( "eleventy-load" ) , { rules : [ { test :...
  • 通过js动态载入页面和css或js的实现代码,需要的朋友可以参考下。国外人写的,可以参考下。
  • js load js

    万次阅读 2012-04-26 11:36:30
    javascript脚本加载 js load block 心细的用户,可以从上面的http瀑布图比较看出:只有等到a.js加载完了,才开始加载b.js,然后再加载图片资源。我们称a.js阻塞b.js。这种现象,称之为js load block。 //...

    javascript脚本加载 js load block


    心细的用户,可以从上面的http瀑布图比较看出:只有等到a.js加载完了,才开始加载b.js,然后再加载图片资源。我们称a.js阻塞b.js。这种现象,称之为js load block。

    //filename:index.html
    <html>
    <head>
      <script type="text/javascript" src="a.js"></script>
      <script type="text/javascript" src="b.js"></script>
    </head>
    <body>
      <img src="http://static.perfgeeks.com/wp-content/uploads/2011/01/p_460_001.jpg" />
    </body>
    </html>

    有没有办法,让这三个不同的资源a.js, b.js, p_460_001.jpg同时加载,减少页面加载时间,避免因阻塞导致的减速影响。通常有以下几个办法

    • 把所有javascript都内嵌在页面中
    • XHR Eval
    • XHR Injection
    • Iframe
    • Script DOM Element
    • Defer
    • document.write

    这里着重介绍最常用的XHR Injection和Script DOM Element二种方法

    XHR Injection

    XHR Injection和XHR Eval注入技巧都是通过XMLHttpRequest来获取Javascript脚本资源。然后,XHR Eval通过javascript函数eval执行脚本。而XHR Injection则是通过创建一个script的DOM元素,然后把XMLHttpRequest的响应注入script中。某些时候,eval会比较慢,所以我们不推荐使用XHR Eval技巧。

    <html>
    <head>
    <script type="text/javascript">
    function load_js(src) {
        var xml_http = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
        xml_http.onreadystatechange = function() {
          if (xml_http.readyState == 4) {
             var script_element = document.createElement('script');
             document.getElementsByTagName('head')[0].appendChild(script_element);
             script_element.text = xml_http.responseText;
          }
        }
        xml_http.open('GET', src, true);
        xml_http.send('');
    }
    load_js('a.js');
    load_js('b.js');
    </script>
    </head>
    <body>
    <img src="http://static.perfgeeks.com/wp-content/uploads/2011/01/p_460_001.jpg" />
    </body>
    </html>


    上图可以看到,a.js, b.js和图片资源并行加载。但是XHR Injection有一个限制,不支持跨域加载。即获取的脚本必须部署在与页面相同的域中。同时,该技术不能保证脚本的执行顺序。

    Script DOM Element

    相较于XHR Injection而言,Script DOM Element技巧支持跨域加载,即可以加载来自不同域的text/javascript资源文件。这是因为该技术利用javascript动态创建script DOM元素并且设置src。

    <html>
    <head>
    <script type="text/javascript">
    function load_js(src) {
      var script_elem = document.createElement('script');
      script_elem.type = 'text/javascript';
      script_elem.src = src;
      document.getElementsByTagName('head')[0].appendChild(script_elem);
    }
    load_js('a.js');
    load_js('b.js');
    load_js('http://www.jt-tech.net/misc/jquery.js');
    </script>
    </head>
    <body>
    <img src="http://static.perfgeeks.com/wp-content/uploads/2011/01/p_460_001.jpg" />
    </body>
    </html>


    上图也解决了javascript加载阻塞产生的减速影响,即a.js、b.js还有跨域jquery.js等并行加载。这种技巧也有一个小小缺陷,就是在某些浏览器(Firefox2.0/3.0/3.1、Safari3.2.1/4.0、Chrome1.0)会阻塞onload事件,影响用户体验

    阻塞渲染、阻塞onload、执行顺序

    阻塞渲染,当使用script src技术加载脚本时,浏览器停止渲染所有脚本后面的内容。这种阻塞给用户带来十分差劲的用户体验。应该尽量地避免这种情况出现。

    //filename:cat bd_i.html
    <html>
    <head>
    <script type="text/javascript" src="c.php">
    </script>
    </head>
    <body>
    hello world
    </body>
    </html>
     
    //filename:vbd_i.html
    <html>
    <head>
    <script type="text/javascript">
    function load_js(src) {
        var xml_http = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
        xml_http.onreadystatechange = function() {
          if (xml_http.readyState == 4) {
             var script_element = document.createElement('script');
             document.getElementsByTagName('head')[0].appendChild(script_element);
             script_element.text = xml_http.responseText;
             script_element.type = 'text/javascript';
          }
        }
        xml_http.open('GET', src, true);
        xml_http.send('');
    }
    load_js('c.php');
    </script>
    </head>
    <body>
    hello world
    </body>
    </html>
     
    //filename: c.php
    <?php
    sleep(2);
    ?>
    function c() {
      return 2;
    }


    二幅图对比,我们可以看到那条竖着的蓝线,表示脚本渲染完成。使用script src技术,则等到c.php(text/javascrip)加载完成之后完成的渲染。而使用XHR Injection技术加载脚本,并没有阻塞渲染。
    阻塞onload,通常页面的onload要直到所有资源加载完成时才会被触发。如果加载一个较大的javascript文件,用户需要等待更长时间,浏览器状态栏才会显示“完成”,同时还有可能延迟默认输入框获取焦点。导致较差的用户体验。
    执行顺序,当一个页面包含多个text/javascript脚本文件的时候。这些高级技术,使得这些脚本同时(并行)加载,受网络与文件大小的影响,脚本文件到到达顺序与开发人员期望的顺序有可能不一致。所以,使用这些高级技术的时候,尽量避免将相互调用的函数分散在不同的文件里面。

    展开全文
  • JavaScript Load Image

    2016-10-10 13:43:01
    A JavaScript library to load and transform image files.
  • 主要介绍了jQuery图片懒加载 lazyload.js使用方法,通过设置临界点,占位符,设置事件来触发加载等等来讲解lazyload.js使用,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
  • lazyload是一个小巧的js,css动态加载器。github: ...// Load a single JavaScript file and execute a callback when it finishes. LazyLoad.js('http://example.com/foo.js', function

    lazyload是一个小巧的js,css动态加载器。github: https://github.com/rgrove/lazyload

    使用:

    // Load a single JavaScript file and execute a callback when it finishes.
    LazyLoad.js('http://example.com/foo.js', function () {
      alert('foo.js has been loaded');
    });
    
    // Load multiple JS files and execute a callback when they've all finished.
    LazyLoad.js(['foo.js', 'bar.js', 'baz.js'], function () {
      alert('all files have been loaded');
    });
    
    // Load a CSS file and pass an argument to the callback function.
    LazyLoad.css('foo.css', function (arg) {
      alert(arg);
    }, 'foo.css has been loaded');
    
    // Load a CSS file and execute the callback in a different scope.
    LazyLoad.css('foo.css', function () {
      alert(this.foo); // displays 'bar'
    }, null, {foo: 'bar'});

    另外script标签支持async和defer属性

    下面是w3cschool上的解释

    • 如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
    • 如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
    • 如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

    展开全文
  • Load.js 动态加载外部JavaScript和CSS文件 安装 npm install load.js 如何使用? const load = require ( 'load' ) ; /* you could use jquery functions here */ await load . js ( 'jquery.js' ) ; /* load menu...
  • Nuxt.js使用lazyload

    2018-07-27 16:15:00
    Vue的使用方式: 1. 安装插件: npm install vue-lazyload --save-dev 2. main.js引入插件: import VueLazyLoad from 'vue-lazyload' Vue.use(VueLazyLoad,{ error:'./static/error.png', loading:'...

    Vue的使用方式:

    1. 安装插件:

    npm install vue-lazyload --save-dev

    2. main.js引入插件:

    import VueLazyLoad from 'vue-lazyload'
    Vue.use(VueLazyLoad,{
        error:'./static/error.png',
        loading:'./static/loading.png'
    })

    3. vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy 

    <img class="item-pic" v-lazy="newItem.picUrl"/>

    Nuxt的使用方式:

    1. 安装插件:

    npm install vue-lazyload --save-dev

    2.Plugin增加vue-lazyload.js,static/images加载loading.png 可以去iconfont下载

    import Vue from 'vue'
    import VueLazyLoad from 'vue-lazyload'
    Vue.use(VueLazyLoad,{
        error:'./images/error.png',
       loading:'./images/loading.png'
    })

    3.nuxt.config.js配置

    plugins:[
      { src: '~/plugins/vue-lazyload', ssr: true },
      { src: '~/plugins/mint-ui', ssr: true }
    ],
    build: {
      vendor:['mint-ui','axios','vue-lazyload'],
    }

    4.图片使用

     <img :src="item.TmImg">  改为 
     <img v-lazy="item.TmImg">

    转载于:https://www.cnblogs.com/kobewang/p/9378229.html

    展开全文
  • 主要介绍了Jquery图片延迟加载插件jquery.lazyload.js使用方法,需要的朋友可以参考下
  • js load

    千次阅读 2007-11-16 15:14:00
    <script type='text/javascript' language='javascript'> if (document.addEventListener){ document.addEventListener('DOMContentLoaded', documentLoaded, false);} else{ window.attachEvent('onload', ...

    <script type='text/javascript' language='javascript'>
    if (document.addEventListener){
    document.addEventListener('DOMContentLoaded', documentLoaded, false);}
    else{
    window.attachEvent('onload', documentLoaded);}

    function documentLoaded()
    {
        document.getElementById("doing").style.display="none";
        document.getElementById("doingt").style.display="none";
    }
    </script>

     

     

    <script language=javascript>

    <!--
    document.onreadystatechange=fnStartInit;
    function fnStartInit()
    {
       if (document.readyState=="complete")
       {
          document.getElementById("doing").style.display="none";
          document.getElementById("doingt").style.display="none";
       }
    }
    //-->
    </script>

    展开全文
  • layer.jsload()方法的使用

    万次阅读 2018-12-21 15:47:08
    1、load方法提供三种风格供选择。 方法一:loadIndex = layer.load(); //不传参,默认0 方法二:loadIndex = layer.load(1); // 1,另外一种风格 方法三:loadIndex = layer.load(2,{time:10*1000}); //2,换一种...
  • lazyload.js是一个基于JQuery的插件,可以用来缓冲加载图片。下面介绍这个插件的使用方法
  • 当我用loadUrl加载webview时,javascript工作正常,但是当我尝试使用loadData加载(我需要它)时,出现错误:“NETWORK_ERR: XMLHttpRequest Exception 101”。这个错误听起来像一个访问控制原点问题。parseJsoup函数...
  • js加载脚本 使用Promise将scipt异步加载到您的应用...import loadScript from 'js-loadscript' ; loadScript ( 'https://myscript.js' ) . then ( ( ) => { // loaded } ) . catch ( ( e ) => { // error } ) ;
  • 只需在您的页面中包含 load.js 脚本即可开始使用。 您将在下面找到使用示例以及完整的 API。 用法 想象一下,您有一个非常简单的应用程序结构,如下所示: -- app | -- custom.css -- general.css -- init....
  • lazyload使用案例及DEMO

    2018-01-11 18:13:39
    lazyload使用案例及DEMO,里面包含了lazyload.js,一些测试图片,jquery.js。开箱即用!2020.06.22更新降低下载积分需求,我个人原意是免费下载的,奈何网站规则不允许!
  • loadTemplate.js实例

    2016-07-22 15:28:42
    loadTemplate js jq 前后端分离 中文讲解loadTemplate.js使用
  • lazyload-JavaScript

    2016-10-17 20:15:18
    lazyload, JavaScript, 图片懒加载, h5
  • 近日因为要做一个管理...jsgrid可以静态加载数据,也可以动态加载数据,静态加载数据在官方文档有直接可运行的例子,这里只要说一下动态的加载数据如何使用loadData来测试。 <div class="card-body"> <...
  • layer.load使用

    千次阅读 2018-12-11 18:36:49
    layer.load(icon, options) - 加载层,详细了解文章《layer API帮助文档》 load并不需要你传太多的参数,但如果你不喜欢默认的加载风格,你还有选择空间。icon支持传入0-2如果是0,无需传。另外特别注意一点:load...
  • #CanLoad.js #####使用 HTML5 画布创建简单、可自定义的 AJAX 加载程序。 #####使用快速自定义您的加载程序 ###初始化 CanLoad 下载:- < ! -- CanLoad spinner will be placed here-- > < / div > -- ...
  • 当你用vue开发的时候,不可避免的就会遇到图片懒加载的问题,之前jquery时代有jquery.lazyload.js,但是那个肯定不能用在vue的项目里。查阅资料后发现Vue-Lazyload这个插件用的频率还是比较高,最近刚好也在研究vue...
  • 最近没有使用vue-cli而是使用的vue.min.js与h5混合开发中用到了vue-lazyload.js 查询了大量的资料但是发现都是脚手架的教程比较多所以稍微整理一下 vue混合开发的用法 1.cdn或者将vue-lazyload.js 下载到本地 <...
  • 主要介绍了使用jQuery的load方法设计动态加载及解决被加载页面js失效问题,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 图片延迟加载实例。在chrome network中查看效果。简单易用 无冗余代码
  • JS load事件(UI)

    千次阅读 2017-05-04 20:57:23
    当页面完全加载后(包括所有...有两种定义onload事件处理程序的方式,第一种方式是使用如下的JavaScript代码: EventUtil.addHandler(window,"load",function(event){ alert("loaded!"); });//关于EventUtil这个对象
  • !... ...但是js使用load方法后,谷歌的Sources工具并没有显示新的页面资源,导致新加载的页面里面的js方法无法debug,开发起来困难,不清楚是不是自己的代码问题还是说是工具问题。麻烦大神们解答一下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 309,273
精华内容 123,709
关键字:

js的load使用