延迟加载js代码,给网页加载留出更多时间
<script type="text/javascript" > function A(){ $.post("/lord/login",{name:username,pwd:password},function(){ alert("Hello"); }); } $(function (){ setTimeout('A()', 1000); //延迟1秒 }) </script>
2.让js最后加载
例如引入外部js脚本文件时,如果放入html的head中,则页面加载前该js脚本就会被加载入页面,而放入body中,则会按照页面从上倒下的加载顺序来运行JavaScript的代码~~~ 所以我们可以把js外部引入的文件放到页面底部,来让js最后引入,从而加快页面加载速度
3.上述方法2也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。
//这些代码应被放置在</body>标签前(接近HTML文件底部) <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script>
这段代码意思是等到整个文档加载完后,再加载外部文件“defer.js”。
使用此段代码的步骤:
1).复制上面代码
2).粘贴代码到HTML的标签前 (靠近HTML文件底部)
3).修改“defer.js”为你的外部JS文件名
4).确保你文件路径是正确的。例如:如果你仅输入“defer.js”,那么“defer.js”文件一定与HTML文件在同一文件夹下。
注意:这段代码直到文档加载完才会加载指定的外部js文件。因此,不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码,另外一组是在页面加载后进行操作的javascript代码(例如添加click事件或其他东西)。这些需等到页面加载后再执行的JavaScript代码,应放在一个外部文件,然后再引进来。
相关推荐
html延迟加载JS和CSS 支持ie6和ie6以上任何浏览器
通过延迟加载来实现按需加载,达到节省资源,加快浏览速度的目的。
通用的延迟加载工具LazyLoad,支持下载多个JavaScript文件,并能保证在所有浏览器中都以正确的顺序执行,同时还能加载CSS文件
js页面图片延迟加载.zip
动态插入节点是最为简单也最为广泛的一种异步加载方式,然后使用动态插入节点方法加载的文件都会 在加载后立即执行,javascript的执行一方面会占用浏览器js执行进程,另一方面也可能改变页面结构,而css 的执行更有...
本文实例讲述了JS图片延迟加载插件LazyImgv1.0用法。分享给大家供大家参考,具体如下: 注:LazyImg 必须定义lazy-data属性,属性值是src的图片路径 引入JS文件: [removed][removed] 默认情况下: 在IMG中满足以...
无论简单还是复杂的Web应用,都由一些HTML、...在这篇文章里,我将解释 RequireJS框架如何帮助应用开发者写出更加模块化的代码,以及它是如何通过延迟加载JavaScript文件来提高应用性能的。 开始的部分我们先不用R
无论简单还是复杂的Web应用,都由一些HTML、...在这篇文章里,我将解释RequireJS框架如何帮助应用开发者写出更加模块化的代码,以及它是如何通过延迟加载JavaScript文件来提高应用性能的。 开始的部分我们先不用R
使用link[rel=stylesheet]或@import引用CSS样式link[rel=stylesheet]会导致浏览器在样式表加载时延迟页面渲染。 当加载对页面的初始呈现不重要的样式表时,这种阻塞行为是不可取的。 下面的模式允许我们异步获取和...
新功能:延迟 JavaScript 执行-通过延迟 JavaScript 文件的加载直到用户交互(例如,滚动,单击)来提高性能 新功能:预加载链接-在用户单击链接之前预取页面,以提高感知的加载速度和用户体验) 增强功能:启用...
将阻止渲染的javascript和css移动到延迟加载部分。 如果您收到PageSpeed Insights结果中的“消除首屏内容中的阻止渲染JavaScript和CSS”警告,则可能会有所帮助 有关如何解决此警告的更多信息,请参见 。 安装 npm ...
仅在加载页面上的所有资源后才加载包(延迟加载)。 内置包管理器将简化加载和创建包的工作。 能够以最大的轻松和灵活性创建自己的命名空间。 附加函数来验证命名空间的存在并在创建一些命名空间时设置回调函数...
从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案。没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前...
引入JS文件:<script type="text/javascript" src="js/lazyImg.v1.0.js"> 默认情况下: 在IMG中满足以任何一个条件,都会加载图片; 1、没有class属性 2、如果有class属性并且属性中不包含以"lazy-"为前缀的css样式...
本文实例为大家讲解了javascript瀑布流代码,即js页面滚动延迟加载图片,分享给大家供大家参考,具体代码如下 <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content=text/html;...
有很多种方法来实现图片的预加载,通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧,用CSS你就可以毫不麻烦的预载你的图片。 为什么使用预载 你为什么会考虑使用预载呢?你是否曾有个网站,...
原理和过程 1.页面滚动加载事件 2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片 3.获取元素集合 加载过的...原生Js页面滚动延迟加载图片</title> <style type=”text/css”> *{margin: 0
wp-rocket是WordPress专业的本地缓存的神器,可以优化你的JS CSS文件结构减少多次请求达到优化速度的目的,还集成了图片延迟加载对最求极致加速的用户不错的选择,通过使用这个插件,能使得你的WordPress博客将显著...
wp-rocket是WordPress专业的本地缓存的神器,可以优化你的JS CSS文件结构减少多次请求达到优化速度的目的,还集成了图片延迟加载对最求极致加速的用户不错的选择,通过使用这个插件,能使得你的WordPress博客将显著...
Vue-Lazyload Vue模块,用于在应用程序中延迟加载图像。 该项目的一些目标值得注意:•重量轻,功能强大且Vue-Lazyload Vue模块用于在应用程序中延迟加载图像。 该项目的一些目标值得注意:重量轻,功能强大且易于...