DOMReady函数

原文来自:snippets.barretlee.com,只是为了自己学习收集特意fork了一遍。如有侵权,联系删除:i@webcliwn.net

1
2
3
4
5
6
7
8
9
var DOMReady = function(a, b, c) {
b = document
c = 'addEventListener'
b[c] ? b[c]('DocumentContentLoaded', a) : window.attachEvent('onload', a)
}

DOMReady(function () {
alert('The DOM is Ready!');
});

cookie工具

原文来自:snippets.barretlee.com,只是为了自己学习收集特意fork了一遍。如有侵权,联系删除:i@webcliwn.net

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
_.cookie = function(name, value, options) {
if (typeof value === "undefined") {
var n, v,
cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
n = $.trim(cookies[i].substr(0,cookies[i].indexOf("=")));
v = cookies[i].substr(cookies[i].indexOf("=")+1);
if (n === name){
return unescape(v);
}
}
} else {
options = options || {};
if (!value) {
value = "";
options.expires = -365;
} else {
value = escape(value);
}
if (options.expires) {
var d = new Date();
d.setDate(d.getDate() + options.expires);
value += "; expires=" + d.toUTCString();
}
if (options.domain) {
value += "; domain=" + options.domain;
}
if (options.path) {
value += "; path=" + options.path;
}
document.cookie = name + "=" + value;
}
};

检查元素是否位于当前视窗(可用于lazyload, infinite scroll等常见功能)

原文来自:snippets.barretlee.com,只是为了自己学习收集特意fork了一遍。如有侵权,联系删除:i@webcliwn.net

1
2
3
4
5
6
7
8
function isInViewport(el) {
var rect = el.getBoundingClientRect();

return rect.bottom > 0 &&
rect.right > 0 &&
rect.left < (window.innerWidth || document. documentElement.clientWidth) &&
rect.top < (window.innerHeight || document. documentElement.clientHeight);
}

Example Usage:

1
2
3
window.addEventListener('scroll', function() {
isInViewport(el);
})

检测字体是否加载

原文来自:snippets.barretlee.com,只是为了自己学习收集特意fork了一遍。如有侵权,联系删除:i@webcliwn.net

1
2
3
4
5
6
7
8
9
10
11
12
function checkFont(strFamily) {
var objDiv = document.createElement('div');

objDiv.style.fontFamily = strFamily;
objDiv.appendChild(document.createTextNode('FONT TEST'));

if (window.getComputedStyle) {
return window.getComputedStyle(objDiv, null).getPropertyValue('font-family') === strFamily;
}

return objDiv.currentStyle.fontFamily === strFamily;
}

分享到社交网站

原文来自:snippets.barretlee.com,只是为了自己学习收集特意fork了一遍。如有侵权,联系删除:i@webcliwn.net

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
(function(doc, script) {
var js,
fjs = doc.getElementsByTagName(script)[0],
frag = doc.createDocumentFragment(),
add = function(url, id) {
if (doc.getElementById(id)) {return;}
js = doc.createElement(script);
js.src = url;
id && (js.id = id);
frag.appendChild( js );
};

// Google+ button
add('https://apis.google.com/js/plusone.js');
// Facebook SDK
add('//connect.facebook.net/en_US/all.js#xfbml=1&appId=200103733347528', 'facebook-jssdk');
// Twitter SDK
add('//platform.twitter.com/widgets.js');

fjs.parentNode.insertBefore(frag, fjs);
}(document, 'script'));

异步js加载器

原文来自:snippets.barretlee.com,只是为了自己学习收集特意fork了一遍。如有侵权,联系删除:i@webcliwn.net

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
var Loader = function () { }
Loader.prototype = {
require: function (scripts, callback) {
this.loadCount = 0;
this.totalRequired = scripts.length;
this.callback = callback;

for (var i = 0; i < scripts.length; i++) {
this.writeScript(scripts[i]);
}
},
loaded: function (evt) {
this.loadCount++;

if (this.loadCount == this.totalRequired && typeof this.callback == 'function') this.callback.call();
},
writeScript: function (src) {
var self = this;
var s = document.createElement('script');
s.type = "text/javascript";
s.async = true;
s.src = src;
s.addEventListener('load', function (e) { self.loaded(e); }, false);
var head = document.getElementsByTagName('head')[0];
head.appendChild(s);
}
}

使用:

1
2
3
4
5
6
7
8
var l = new Loader();
l.require([
"example-script-1.js",
"example-script-2.js"],
function() {
// Callback
console.log('All Scripts Loaded');
});

html5 兼容版本 video

原文来自:snippets.barretlee.com,只是为了自己学习收集特意fork了一遍。如有侵权,联系删除:i@webcliwn.net

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
<!-- fallback to Flash: -->
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p> <strong>Download Video:</strong>
Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>
</p>