Lazy Loading Images
Use a blank.gif
as the src
of images, and include the width
and height
of the final image.
HTML:
<img src="blank.gif" class="lazy" data-src="http://cdn.css-tricks.com/images/full-size.jpg" width="240" height="152"></a>
JavaScript:
/* lazyload.js (c) Lorenzo Giuliani
* MIT License (http://www.opensource.org/licenses/mit-license.html)
*
* expects a list of:
* `<img src="blank.gif" data-src="my_image.png" width="600" height="400" class="lazy">`
*/ !function(window){
var $q = function(q, res){
if (document.querySelectorAll) {
res = document.querySelectorAll(q);
} else {
var d=document
, a=d.styleSheets[0] || d.createStyleSheet();
a.addRule(q,'f:b');
for(var l=d.all,b=0,c=[],f=l.length;b<f;b++)
l[b].currentStyle.f && c.push(l[b]); a.removeRule(0);
res = c;
}
return res;
}
, addEventListener = function(evt, fn){
window.addEventListener
? this.addEventListener(evt, fn, false)
: (window.attachEvent)
? this.attachEvent('on' + evt, fn)
: this['on' + evt] = fn;
}
, _has = function(obj, key) {
return Object.prototype.hasOwnProperty.call(obj, key);
}
; function loadImage (el, fn) {
var img = new Image()
, src = el.getAttribute('data-src');
img.onload = function() {
if (!! el.parent)
el.parent.replaceChild(img, el)
else
el.src = src; fn? fn() : null;
}
img.src = src;
} function elementInViewport(el) {
var rect = el.getBoundingClientRect() return (
rect.top >= 0
&& rect.left >= 0
&& rect.top <= (window.innerHeight || document.documentElement.clientHeight)
)
} var images = new Array()
, query = $q('img.lazy')
, processScroll = function(){
for (var i = 0; i < images.length; i++) {
if (elementInViewport(images[i])) {
loadImage(images[i], function () {
images.splice(i, i);
});
}
};
}
;
// Array.prototype.slice.call is not callable under our lovely IE8
for (var i = 0; i < query.length; i++) {
images.push(query[i]);
}; processScroll();
addEventListener('scroll',processScroll); }(this);
Lazy Loading Images的更多相关文章
- Angular2+typescript+webpack2(支持aot, tree shaking, lazy loading)
概述 Angular2官方推荐的应该是使用systemjs加载, 但是当我使用到它的tree shaking的时候,发现如果使用systemjs+rollup,只能打包成一个文件,然后lazy loa ...
- Lazyr.js – 延迟加载图片(Lazy Loading)
Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示 ...
- Can you explain Lazy Loading?
Introduction Lazy loading is a concept where we delay the loading of the object until the point wher ...
- [AngularJS] Lazy Loading modules with ui-router and ocLazyLoad
We've looked at lazy loading with ocLazyLoad previously, but what if we are using ui-router and want ...
- [AngularJS] Lazy loading Angular modules with ocLazyLoad
With the ocLazyLoad you can load AngularJS modules on demand. This is very handy for runtime loading ...
- iOS swift lazy loading
Why bother lazy loading and purging pages, you ask? Well, in this example, it won't matter too much ...
- Entity Framework加载相关实体——延迟加载Lazy Loading、贪婪加载Eager Loading、显示加载Explicit Loading
Entity Framework提供了三种加载相关实体的方法:Lazy Loading,Eager Loading和Explicit Loading.首先我们先来看一下MSDN对三种加载实体方法的定义 ...
- Lazy Loading | Explicit Loading | Eager Loading in EntityFramework and EntityFramework.Core
EntityFramework Eagerly Loading Eager loading is the process whereby a query for one type of entity ...
- EFCore Lazy Loading + Inheritance = 干净的数据表 (二) 【献给处女座的DB First程序猿】
前言 本篇是上一篇EFCore Lazy Loading + Inheritance = 干净的数据表 (一) [献给处女座的DB First程序猿] 前菜 的续篇.这一篇才是真的为处女座的DB Fi ...
- EFCore Lazy Loading + Inheritance = 干净的数据表 (一) 【献给处女座的DB First程序猿】
前言 α角 与 β角 关于α角 与 β角的介绍,请见上文 如何用EFCore Lazy Loading实现Entity Split. 本篇会继续有关于β角的彩蛋在等着大家去发掘./斜眼笑 其他 本篇的 ...
随机推荐
- android studio修改新项目package名称
android项目生成APK发布必须保证package唯一.新项目在已有项目基础上修改就必须修改package名称. 操作如下: 1) 在模块(module)上右键选择Refactor->Ren ...
- C++模板知识小结
模板定义:模板就是实现代码重用机制的一种工具,它可以实现类型参数化,即把类型定义为参数, 从而实现了真正的代码可重用性.模版可以分为两类,一个是函数模版,另外一个是类模版. 由于类模板包含类型参数,因 ...
- 让 PowerDesigner 支持 SQLite!
让 PowerDesigner 支持 SQLite! PowerDesigner是一个功能强大的数据库设计软件,最近正在用其设计新系统的数据库,但由于在项目初级阶段,希望使用轻量级的 SQLite ...
- 解决:cc1.exe: sorry, unimplemented: 64-bit mode not compiled in
在win下用Go语言的cgo时(比如下面场景)我们会用到的GCC编译器,Win下我们一般用MinGW. Golang连接Oracle数据库:win下 golang 跨平台编译 MinGW全称Minim ...
- 新的小游戏发布啦。Pop Jungle
丛林爱消除是一款画面清新,效果绚丽的消除类休闲游戏.你只需要选中尽可能多的图块,并消除它们就可以得到高分,并有无限多的关卡等待你去征服.一旦你开始玩儿你将无法停止下来,如果你还是消除星星的粉丝,那你更 ...
- bzoj1193
#include<cstdio> #include<cstdlib> #include<algorithm> #include<queue> using ...
- NET知识大纲
第一部分 C#编程基础 1.(30)变量.运算符(+.-.*./.++.--.括号.==.!=.>.<.>=.<=.&&.||).流程控制(if.while.f ...
- CentOS安装中文输入法:ibus
转自 http://gnucto.blog.51cto.com/3391516/935964 系统环境:Centos 6.3 编程语言:python + Bash 输入法:ibus 权限支持:root ...
- 全面理解Linux输入输出重定向
全面理解Linux输入输出重定向 本教程通过视频方式讲解shell操作,理解感念,教程通俗易懂,比起看一大堆文档要舒服的多.本次教程主要讲解 Linux Shell 中支持输入输出重定向,用符号&l ...
- Fedora 14 x64 试用手记
欢迎大家给我投票: http://2010blog.51cto.com/350944 刊登在: http://os.51cto.com/art/201011/235506.htm FC14桌面使用体验 ...