刚刚改进了一下某个页面的图片lazyload功能。
原先是用jquery的lazyload插件的标准方式做的。有一个缺点是脚本不开启时图片都不显示了。
解决方法也不难,就是同时插一个noscript标签。lazyload插件官网给出的解决方案也是如此。
<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>
不过这个方式带来双份的代码,且还要额外的样式表切换(避免无脚本时也出现用于有脚本时的占位图片)。
其实脚本本来就可以做任何事情,我们完全可以直接提取noscript里的部分。以下是代码示例
1. 模板部分(Jade):
span.thumb
if (imgSrc)
if index >= 10
noscript: img(src=imgSrc, alt='')
else
img(src=imgSrc, alt='')
else
img(src='default.png', alt='')
注:暂时设定了前10项不用lazyload。
2. 脚本部分:
script(src="jquery.lazyload.min.js")
script
$(function(){
var imgs = $('span.thumb:has(noscript:contains(img))')
$(window).on('scroll', function(evt){
var showImgs = imgs.filter(':in-viewport')
showImgs.html(function(){ return $(this).find('noscript').text() })
imgs = imgs.not(showImgs)
})
})
注:
:has(selector)是jQuery支持的伪类,表示子代元素必须匹配指定selector。
:contains(text)也是jQuery支持的伪类,表示元素包含指定的文本。因为noscript里的部分被作为文本节点,所以这里其实是比较随意的,比如<noscript>sex img</noscript>也会匹配。
:in-viewport是lazyload插件扩展的伪类,表示元素是否处于窗口可见区域。
当然以上的方式的缺点就是无法使用lazyload插件的标准方式和其他功能(比如渐现),但这足以作为一个PoC,我有空完善下再给lazyload作者发个pull request(或者哪位读者愿意做这个事情也很好啊)。
分享到:
相关推荐
用于显示动态加载的图片如何通过JQuery.LazyLoad控件实现延迟加载,可惜目前例子在谷歌浏览器下还有些问题
Lazyload是通过延迟加载来实现按需加载,达到节省资源,加快浏览速度的目的。 网上也有不少类似的效果,这个Lazyload主要特点是: 支持使用window(窗口)或元素作为容器对象; 对静态(位置大小不变)元素做了大量...
JQuery Lazyload加载图片实例
JQuery LazyLoad 图片懒加载实例,相关描述可查看我的博文“JQuery.LazyLoad 实现图片懒加载”
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...
Lazyload图片延迟加载效果
图片延迟加载,可以增加用户体验,jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下,它也能帮助减轻服务器负载。
jQuery_lazyload插件示例Demo
Jquery 图片 lazyload 无说明
应用lazyload.js 插件实现图片懒加载
tableViewCell图片lazyload 图片延迟加载
lazyload, JavaScript, 图片懒加载, h5
一个组件实现lazyload图片当在视窗内(或附近)时才加载
图片懒加载lazyload,增快页面访问速度。
js lazyload实现网页图片延迟加载特效
jquery.lazyload图片预加载 调用简单 内有实例
lazyload.js实现图片异步延迟加载
lazyload技术内幕,当下最流行的图片浏览技术
lazyload-2.x 最新版本包括api使用
LazyLoad页面加载技术实例,根据页面滚动加载图片 LazyLoad页面加载技术实例,根据页面滚动加载图片