js jquery.lazyloadd使用的问题

所有回答(4)
按编程执行的顺序排列,也就是你的程序需要先执行什么就排列在前面,最后执行什么就排列在最后。
园豆:8688
main.js里 寫一系列 if語句,不同的語句,調用不同的js文件。
园豆:3739
园豆:3739
1 (function(w, S) {
var m = document,
x = "length",
s = 'split',
r = 'charAt',
B = 'substring',
y = "prototype",
w = w[S] = w[S] || {},
w.ApisBase = '/js';w.js_ext='.js';
function R(a, b) {
for (var c = a[s](/\./), e = w, f = 0; f & c[x] - 1; f++) e[c[f]] || (e[c[f]] = {}),
e = e[c[f]];
e[c[c[x] - 1]] = b
function I(a) {
a = Error(a);
a.toString = function() {
return this.message
function U(a) {
this.h = j
w.d = function(a, b, c) {
"script" == a ? (e = m.createElement("script"), e.type = "text/javascript", e.src = b) : "css" == a && (e = m.createElement("link"), e.type = "text/css", e.href = b, e.rel = "stylesheet"); (a = m.getElementsByTagName("head")[0]) || (a = m.body.parentNode.appendChild(m.createElement("head")));
a.appendChild(e)
} else "script" == a ? m.write('&script src="' + b + '" type="text/javascript"&&\/script&') : "css" == a && m.write('&link href="' + b + '" type="text/css" rel="stylesheet"&&/link&')
function(a) {
w.d("script", this.g(a), j)
U[y].m = function() {
return this.h
U[y].g = function(a) {
return w.ApisBase + "/libs/" + a+w.js_
function n(a, b) {
a.load = b
R('loader.as',
function(b) {
for (var i = 0; i & b[x]; i++)(b[i] && ":" == b[i][r](0) && !l[b[i]]) && (l[b[i]] = new U(b[i][B](1)))
}) R('N', l) n(w,
function(a) {
if (a = l[":" + f]) a.h || a.load(a.a);
else throw I("Module: '" + f + "' not found!")
60 })(window, 'S');
61 S.loader.as([':jquery', ':a', ':b']);
62 S.load('b');
63 S.load('b');
具体方法改进参考google的apijs,只完成了模块安全性验证和模块载时重复性验证,模块加载后的回调你自己实现。匿名函数的第二个参数&S"是命名空间,你可以根据自己的命名空间修改。通过S.loader.as方法规范可以加载的模块(通过这个函数把你已经完成的模块的模块名包含进来),然后通过s.load加载你的模块,通过修改s.ApisBasep完成加载路径的修改,s.js_ext是js的后缀。
我对google apijs的源码分析可以查看
通过google.setOnLoadCallback来设置回调。
楼上所有回答都是牛头不对马嘴。你想要模块化加载JS文件,且你已经选requireJs作为加载框架。一、在你的WEB页面添加&script data-main="scripts/main" src="scripts/require-jquery.js"&&/script&。二、在main.js里面依次写上你的js模块文件名如下:
require(["jquery", "jquery.lazyload", "bar.debug"], function($) {&& &&& $(function() {&& &&& &//图片延迟执行模块&&&&&&& $("img").lazyload({&& &&& &placeholder : "../img/grey.gif",&& &&& &effect&&&&& : "fadeIn"&& &&& &});&& &&& &&& &&& &//&&& });});
注意顺序,我这直接用的是require-jquery.js,集成了jquery,我第二个加载的是jquery的 一个插件,然后在下面的回调函数中就可以使用了。我也是昨在学会的,我是看的官网的例子,这个学不精通,便原理相当简单,看以上面的回答太让人郁闷。所以我献丑了。
&&&您需要以后才能回答,未注册用户请先。需引入文件:lazyload-min.js&script src="JS/lazyload-min.js" type="text/javascript"&&/script&插入代码:function loadscript() {
LazyLoad.loadOnce([
'JS/touch.js',
'/jquery/1.2.3/jquery.min.js'
], loadComplete);
}setTimeout(loadscript, 0);实现在window.load事件完成0秒后加载touch.js与jquery.min.js两个文件&我们知道在PC浏览器上DOM加载顺序为:解析HTML结构。加载外部脚本和样式表文件。解析并执行脚本代码。构造HTML DOM模型。加载图片等外部文件。页面加载完毕。在移动浏览器特别是移动壳应用浏览网页的时候,会先加载js文件再加载其他结构,如果加载的js文件较多,会让用户看到很长时间的白屏状态,降低用户体验。还可以加上$("img").lazyload(); 使图片最后加载,当然要先引入jQuery。&
JS文件中加载jquery.js(JS文件添加其他JS文件) - whatday的专栏 -...jquery文件加载出错问题,js调用问题_百度知道3个回答 - 提问时间: 日由于js加载的问题,访问站速度快的时候,jquery会在你调用它的方法之前就被加载了,如果速度慢的话,就会先执行了方法,但js还没有加载完,就出错 可能是...jquery动态加载外部js文件代码研究 -jquery-页制作-壹聚教程 在jquery中要动态加载外部js文件我可直接使用jquery ajax中的$.getScript来实现加载了,当然我们也可以用传统的js输出形式来加载了。 $.getScript函数动态加载js ...急求jquery怎么能让在JS文件在不重新加载的情况下,让一个..._希赛急求jquery如何能让在JS文件在不重新加载的情况下,让一个事件只执行一次jquery如何能让在JS文件在不重新加载的情况下,让一个事件只执行一次 比如$(&#codeThree&...如何使用jquery动态加载js,css文件实现代码 - 鸿互联[68IDC]在jquery中要实现动态加载js文件的方法有很多种,最简单的我们可以直接利用$.include()方法来实现,感兴趣的朋友可以参考下哈 使用jquery动态加载js,css...jquery+ajax所要加载的js文件问题_百度知道4个回答 - 提问时间: 日jquery.js文件是jquery的架类库包,里面封装了很多供jquery调用的功能方法. 你要用jquery时,就回调入jquery.js文件. 如果平常一些效果,如js动态换图片 也...急求jquery如何能让在JS文件在不重新加载的情况下,让一..._CSDN论坛6条回复&-&发帖时间:&日如何使用jquery动态加载js,css文件 - 推酷如何使用jquery动态加载js,css文件时间 11:01:07 CSDN博客 ...我来评几句 登录后评论 已发表评论数() 相关站点 CSDN博客 相关主题 ...jquery easyui easyloader加载外部js文件失败问题解决 - ..._上学吧easyloader加载外部js文件时,虽然回调函数调用成功,但js文件加载不上,解决方法... easyloader.load(['layout','tabs','messager','portal','baseUI'], ...JQuery的$(document).ready(function(){})与JS的window.load 的...是在页面加载完所有DOM节点文档结构后开始执行,window.load则是在页面加载所有资源后才开始执行。也就是说window.load要等到所有图片,外链资源都加载完后才开始执行...如何使用jquery动态加载js,css文件实现代码_最新咨讯_河北博才_...使用jquery动态加载js,css文件 $.extend({ includePath: '', include: function(file) { var files = typeof file == &string& ? [file]:...jquery 动态加载js文件出现的乱码_小组_ThinkSAAS
最近我在做项目的时候遇到了一个就是用jquery加载js文件的时候出现了乱码,然后我在firebug里面看到加载的js文件内容出现了乱码,然后我又打开对应的js文件...jquery mobile为什么无法加载外的JS文件?1个回答 - 最新回答: 日高山仰止,莫测高深。。。。 查看原帖&&JS代码,jQuery特效和页特效代码免费下载-懒人图库Window load 事件延时-jQuery学习在Window load 事件中,我们可以进行延时处理,这样当页面加载时可以处理一些事件。 (function fn() { fn.now = +new D $(window).load(function () { ...解决jquery easyui easyloader加载外部js文件失败问题_Java..._三联easyloader加载外部js文件时,虽然回调函数调用成功,但js文件加载不上,解决方法... easyloader.load(['layout','tabs','messager','portal','baseUI'], ...jquery.loadmask.js ---jquery一款加载等待插件 - 一万年太久 - ...[]所LoadMask 不光要引入它的 js 文件,还要引入一个 css 文件,BlockUI 则只需一个 js 文件,因而 LoadMask 的样式定制需要写些 css 的东西。 BlockUI 的 Demo ...利用jQuery的deferred对象实现异步按顺序加载JS文件jQuery的deferred异步按顺序加载JS文件方案分享...load: load }; })(); 代码比较简单,这里... 如果我们想先载入b.js,后载入a.js,示例代码......- Lab.js and jQuery with $(window).load(function() fire ... var windowLoad = $.Deferred(); $(window).load(windowLoad.resolve); $LAB .script(&script1.js&) .script(&script2.js&) .script(&script3.js&)...js文件在页中是一次性加载吗?比如jquery库_百度知道2个回答 - 提问时间: 日&script language=&javascript& src=&${ctx}/js/jquery-1.10.2.min.js&&&/script& 只要你JSP页面引了 jquery.js他就会把里面的内容全部加载进来,...我在jsp文件中引用了jquery-1.6.1.min.js,js加载频繁得..._CSDN论坛3条回复&-&发帖时间:&日Javascript装载和执行 - 51CTO什么样的值,只要它出现,它就开始异步加载 js文件。...这个方式几乎成了标准的异步载入js文件的方式,这个...绑在window.load事件上——示例四 你一定要比较一下...利用jQuery的deferred对象实现异步按顺序加载JS文件_jq..._脚本之家利用jQuery的deferred异步按顺序加载JS文件方案分享出来...load: load }; })(); 代码比较简单,这里就不...如果我们想先载入b.js,后载入a.js,示例代码如下:...jQuery动态加载js文件并立即执行其方法 - 推酷js文件内放入该表单的处理文件。系统使用到改表单时,由主界面动态将表单所属的js与xml文件加载到主页面。并生成表单。动态加载JS文件,并立即执行其...使用jQuery动态加载js脚本文件的方法-源码库|专注为中国站长提供...文章TAG:jquery加载js文件 jqueryajax加载js jquery...可以加载单一的js文件;当加载完成后你可以在回调函数... window.open()详解及浏览器兼容性问题示例探讨...lazyload-min.js 用来加速页的一个小运用 - 飞鸽沟通最简单 - ... js文件最后加载(在window.load事件发生后再加载js文件),用于解决因jQuery等js库导致页加载慢的问题。 需引入文件:lazyload-min.js 插入代码: function loadscrip...解决用jquery load加载页面到div时,不执行页面js的问题$(&#test&).load(&${contextPath}/notepad/toCreate.do&);} 加载${cont...js事件: . 代码如下: function loadPage(){ window.open(&${contextPath}/...js中的window.onload和jquery中的load区别的讲解 - 超越梦想... -...在常规的 Javascript 代码中,通常使用 window.onload....load()页面中的图片或其它东西加载完成之后,执行该... ASP MVC 引入JavaScript(.JS)文件 u...使用jQuery动态加载js脚本文件的方法_Javascript教程_三联在上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js... jQuery内置了一个方法可以加载单一的js文件;当加载完成后你可以在回调函数里...解决用jquery load加载页面到div时,不执行页面的js - 周雷 - 博客园 js事件: function loadPage(){
点击按钮时,加载页面到iframe中,里面的js是可以使用的,感觉不太好,就像是刷新页面了一样...posted @
16:00 ...为什么jquery load加载页面的js代码会失效?有什么好的解决方法?3个回答 - 提问时间: 日load加载表单的提交按钮点击无效 直接测试该页面,看提交按钮是否有效。 将你加载表单页面的代码提出来。看是否有问题JavaScript和Jquery动态加载Js文件和Css文件-php程序员的笔记如果你有很多关联的CSS文件要一起加载,或者想动态的加载不同的CSS文件,那么下面的方法你一定对你有帮助。(1)使用JavaScript动态加载Js文件...javascript或jquery如何实现延迟加载js文件_百度知道3个回答 - 最新回答: 日 - 2人觉得有用// 请看jquery的getScript// 想加载js的时候$.getScript('url', callback);// 如果指定多少时间之后加载jssetTimeout(function() { $.getScript('...更多关于js文件最后加载(在window.load事件发生后再加载js文件),用于解决因jQuery等js库导的问题&&Jquery图片延迟加载插件jquery.lazyload.js的使用方法
最新版的jquery.lazyload.js已不再是伪的延迟加载了
一、请按照基本使用方法说明设置
代码如下://载入JavaScript 文件&script src="jquery.js" type="text/javascript"&&/script&&script src="jquery.lazyload.js" type="text/javascript"&&/script&
代码如下://img标签的4个属性一个都不能少,否则不能实现延迟加载的效果,如下:&img class="lazy" data-original="img/example.jpg" width="640" height="480"&
代码如下://使用$(function() {&&& $("img.lazy").lazyload();});
二、常用属性说明
代码如下:threshold : 200&& //设置灵敏度,表示进入显示区域还有200像素就开始加载effect : "fadeIn" //使用淡入特效failure_limit : 10 //容差范围,一定要设置此值,原因说明请参考原文档
container: $("#container") //使用父容器,父容器的CSS样式至少应包含"height: 600overflow:"两个属性
event : "click" //修改触发事件为单击
英文参考:http://www.appelsiini.net/projects/lazyload
中文参考:/jquery/lazyload/
顶一下(0) 踩一下(0)
热门标签:页面导航:
→ 正文内容 jquery延迟加载图片
jquery插件lazyload.js延迟加载图片的使用方法
lazyload.js是一个基于JQuery的插件,可以用来缓冲加载图片。下面介绍这个插件的使用方法
如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来。通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度。
Lazy Load 插件原理
修改目标img元素的src属性为orginal属性,从而中断图片的加载。检测滚动状态,然后把网页可视区域中的img的src属性还原然后加载图片,从而制造了一种缓冲加载的效果。代码引入方法:
代码如下:&script type="text/javascript" src="js/jquery-1.8.3.min.js"&&/script&&script type="text/javascript" src="js/jquery.lazyload.js"&&/script&&script type="text/javascript"&&&& $(document).ready(&&& function($){&&& $("img").lazyload({&&&&&&&& placeholder : "images/grey.gif", //加载图片前的占位图片&&&&&&&& effect&&&&& : "fadeIn" //加载图片使用的效果(淡入)&&& });&&& });&/script&
但是现在,很多Javascript大牛分析得出,这个插件其实并没有真正的起到缓加载的作用。确实是这样,官方也已经给出了说明和解决方法了。
其实原因就在于在新版的浏览器中,即使我们删除了Javascript控制的src属性,浏览器仍然会去加载这个图像。
那么我们该怎么解决呢?其实也很简单,需要直接修改HTML的结构,在img标签中添加新的属性,把src属性的值指向占位图片,添加data-original属性,让其指向真正的图像地址。比如:
代码如下:&img src="img/grey.gif" data-original="img/example.jpg" &
当然,在上面的代码中我们把页面内的所有图片都延迟加载了,但有些时候我们并不希望这样,因为有些图片并不想然他们延迟加载,那么我们可以这样只需做:
如只缓冲加载类main下的图像
代码如下:$(".main img").lazyload({&&&& placeholder : "images/grey.gif",&&&& effect&&&&& : "fadeIn"});
加载挂载有lazy类的图像:
代码如下:$("img.lazy").lazyload({&&&& placeholder : "images/grey.gif",&&&& effect&&&&& : "fadeIn"});
其他的以此类推,适当做一下选择器调整就行了。
lazyload.js 高级使用方法:
下面部分来自官方文档,将官方文档进行了一下简单的翻译。
更周全的做法
我们不得不思考这样一个问题。我们定义了这样一个结构,那么网页中,就不会加载源图像了。只有当 Javascript 执行,才会显示这个源图像。如果用户的浏览器不支持或者用户关掉了支持 Javascript 的选项,那么我们的这个图像就无法显示出来。也就是说,如果没有 Javascript 的支持,我们的图像就无法显示出来。
应对这个问题,我们需要引入noscript 标签。大体思路如下:用 noscript 包含真实的图像位置,当浏览器不支持 Javascript,直接显示图像。
代码如下:&img class="lazy" src="img/grey.gif" data-original="img/example.jpg"& width="640" heigh="480"&&noscript&&img src="img/example.jpg" width="640" heigh="480"&&/noscript&
对现有图像,隐藏处理,使用 show()方法触发显示。
代码如下:.lazy {& display:}
这样,如果浏览器不支持 Javascript,我们自定义的 img 就不会出现,而显示 noscript 里面的图像。具体实现代码如下:
代码如下:$("img.lazy").show().lazyload();
默认的情况是,当你滚动到图片位置的时候,插件开始加载。这样,用户可能首先看到的是一个空白图像,然后再缓慢出现。如果你想在用户滚动之前,提前加载这个图像,你可以配置一下参数。
代码如下:$("img.lazy").lazyload({&&& threshold : 200});
threshold 这个参数,就是用来提前加载的。上面这个语句的意思是,当距离图片还有200像素的时候,就开始加载图片。
自定义触发事件
默认的触发事件,是滚动,当你滚动的时候,就会检查然后加载。你可以使用event属性,设置你自己的加载事件,之后你可以自定义触发这个事件的条件,然后去加载图像。
代码如下:$("img.lazy").lazyload({&&& event : "click"});
自定义显示效果
默认的图片实现效果,就是没有效果,下载完成之后,直接显示出来。这样的用户体验并不好,你可以设置effect属性,来控制显示图片的效果。例如
代码如下:$("img.lazy").lazyload({&&& effect : "fadeIn"});
fadeIn的效果就是,改变图片的透明度,渐现的方式出现。
把图像插入某个容器
大家如果使用智能手机的话,经常去应用网站下载应用,他们通常使用一个横着的容器,放一些手机截图。使用container属性,能很轻松在容器中实现缓冲加载。首先,我们需要用css定义这个容器,然后用这个插件进行加载。
代码如下:#container { height: 600 overflow: }$("img.lazy").lazyload({&&& container: $("#container")});
加载不可见图像
有部分图像是不可见的,我们对其加上类似 display:等属性的图像。默认的情况下,这个插件是不会加载隐藏的不可见图像。如果我们需要用它加载不可见图像,我们需要将 skip_invisible设置为false,代码如下: 代码如下:$("img.lazy").lazyload({&&& skip_invisible : false});
好了,这就是lazyload.js这款插件的简单介绍了。
您可能感兴趣的文章:
上一篇:下一篇:
最 近 更 新
热 点 排 行
12345678910您所在的位置是&&
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
[导读]之前一直有关注过Jquery.LazyLoad.js这个特效,但一直没有用,这几天研究了一下,并应用于实际中,对网站SEO方面没有什么帮助,不过可以节省一些流量,对于大网站来说显的尤为重要,至于节省了多少流量我无从统计。
从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案。没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。 解决思路大致是两点,一是从LazyLoad本身的滤镜参数下手,发现有一个参数在IE6和IE7是可以用的,就是show,那么在IE6和IE7下用这个特效;二是IE8以上(包括IE8)、FireFox,Chrome等非IE核心的浏览器对fadeIn特效都支持,那么在这些版本的浏览器中就使用这种酷酷的特效。 思路出来了,就想办法解决: 1、首先用JQ判断浏览器类型及版本,如果是IE8以下的浏览器就用effect=show,否则就用effect=fadeIn,判断浏览器版本函数如下:
代码如下: function checkbrowse() { var ua = navigator.userAgent.toLowerCase(); var is = (ua.match(/b(chrome|opera|safari|msie|firefox)b/) || ['', 'mozilla'])[1]; var r = '(?:' + is + '|version)[\/: ]([\d.]+)'; var v = (ua.match(new RegExp(r)) || [])[1]; jQuery.browser.is = jQuery.browser.ver = return { 'is': jQuery.browser.is, 'ver': jQuery.browser.ver } }
我是将以上的代码加入了JQ包里,方便以后使用,路径是http://demo.jb51.net/js/2011/lazyload/Js/lazyload/jquery.js。 2、改造Jquery.LazyLoad.js函数,根据浏览器版本来显示不同的滤镜效果:
代码如下: var public = checkbrowse(); var showeffect = &&; if ((public['is'] == 'msie' && public['ver'] & 8.0)) { showeffect = &show& } else { showeffect = &fadeIn& } jQuery(document).ready(function($) { $(&img&).lazyload({ placeholder: &http://demo.jb51.net/js/2011/lazyload/Js/lazyload/grey.gif&, effect: showeffect, failurelimit: 10 }) });
Jquery.LazyLoad.js使用方法: 1、将以下文件存放在同一目录下面: jquery.js jquery.layzload.js grey.gif 2、在需要使用特效的地方加上如下的代码: &script type=&text/javascript& src=&http://demo.jb51.net/js/2011/lazyload/Js/lazyload/jquery.js&&&/script& &script type=&text/javascript& src=&http://demo.jb51.net/js/2011/lazyload/Js/lazyload/jquery.lazyload.js&&&/script& Jquery.LazyLoad.js插件修正版下载: lazyload.rar Jquery.LazyLoad.js插件参数详解: 下面对LazyLoad插件的一些参数进行说明,供使用者做出更贴切的效果。 1,用图片提前占位 placeholder : &img/grey.gif&, 参数:placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏 2,载入使用何种效果 effect : &fadeIn&, 参数:effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn 3,提前开始加载 threshold : 200, 参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉. 4,事件触发时才加载 event : &click&, 参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试… 5,对某容器中的图片实现效果 container: $(&#container&), 参数:container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片 6,图片排序混乱时 failurelimit : 10, 参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
Copyright 2000- (尚网—IT领域分享,学习,交流的平台)
All Rights Reserved
京公网安备 13号

我要回帖

更多关于 lazyload.js下载 的文章

 

随机推荐