图片延迟加载,滚动加载

  • 使用一个空白的srcgif图像
1
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
!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);​

http://lab.maltewassermann.com/viewport-resizer/

  • 在控制台输出以下代码即可
1
javascript:void((function(d){if(self!=top||d.getElementById('toolbar')&&d.getElementById('toolbar').getAttribute('data-resizer'))return false;d.write('<!DOCTYPE HTML><html style="opacity:0;"><head><meta charset="utf-8"/></head><body><a data-viewport="240x240" data-icon="handy">Mobile</a><a data-viewport="320x480" data-icon="mobile">Mobile (e.g. Apple iPhone)</a><a data-viewport="320x568" data-icon="mobile" data-version="5">Apple iPhone 5</a><a data-viewport="600x800" data-icon="small-tablet">Small Tablet</a><a data-viewport="768x1024" data-icon="tablet">Tablet (e.g. Apple iPad 2-3rd, mini)</a><a data-viewport="1024x768" data-icon="display" data-version="17″">17″ Display</a><a data-viewport="1280x800" data-icon="notebook">Widescreen</a><a data-viewport="2560x1600" data-icon="display" data-version="30″">30″ Apple Cinema Display</a><script src="http://lab.maltewassermann.com/viewport-resizer/resizer.min.js"></script></body></html>')})(document));

根据图片大小获取

demo

1
https://unsplash.it/200/300

随机获取

1
https://unsplash.it/200/300/?random

获取图片列表

1
https://unsplash.it/list

模糊效果

1
https://unsplash.it/200/300/?blur

file:///C:/Users/zhouhengyi/Desktop/unsplash-it-master/public/index.html


  • HTML
1
2
3
4
5
<h2 class="images">0</h2>
<input type="text" value="0" id="txt_end"/>
-
<input type="text" value="0" id="txt_start" />
<input type="button" value="+500" onclick="setNum(500);"/>
  • JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var countToNumber = function (element, number, suffix, duration) {
$({count: parseInt(element.text().split("+")[0].replace(/\,/g, ''))}).animate({count: number}, {
duration: duration ? duration : 1000,
easing: 'swing',
step: function (now) {
element.text((Math.floor(now) + suffix).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
},
complete: function () {
countingFromZero = false;
}
});
}

//调用
countToNumber($('.images'), 500, '', 200);

function setNum(){
countToNumber($('.images'), $("#txt_start").val(), '', $("#txt_end").val());
}
  • 依赖 jquery

轻量级CSS 响应式框架

  • 引用
    1
    http://maroslaw.github.io/rainyday.js/dist/rainyday.0.1.2.min.js

Demo

https://github.com/maroslaw/rainyday

VirtualBox
下载:https://www.virtualbox.org/

Vagrant
下载:https://www.vagrantup.com/

Box
http://www.vagrantbox.es/

安装Box

1
vagrant box add hefeng centeros.box

切换至对应初始目录

1
vagrant init hefeng

OK 的话当前-目录会生成Vagrantfile文件,并进行网络配置

启动

1
vagrant up

登录的帐号密码均为 vagrant ,登录之后如果需要 su root ,密码也是 vagrant
注:使用 vagrant ssh 时,会提示可以使用密钥进行登录,如果需要使用putty进行密钥登录的话,需要下载 puttygen 将 ssh 的密钥转换为 ppk 文件才能使用。

1
vagrant ssh

1
2
3
4
Host: 127.0.0.1
Port: 2222
Username: vagrant
Private key: E:/dev/.vagrant/machines/default/virtualbox/private_key

下载SSH 工具(windows)
http://mobaxterm.mobatek.net/MobaXterm_v8.4.zip

链接时选择上方 Private key

设置端口转发

服务器:192.168.0.236 : 22
vagrant1:127.0.0.1(192.168.0.115) 2222
本机:127.0.0.1:8080

Mobile Analytics