这只是个原型， Lazyloader 的功能并没完成。
不过，基本功能以经完成了，最后修改日期是6月11号，都放那一个多月了，现在用不上，也懒的去完善它。
我在这里把它贴出来，或许对你有用：
<script type="text/javascript">
(function($) {
var __alert__ = $.alert;
$.alert = function() {
var arg,s = "";
for (var i = 0; i < arguments.length; i++) {
s += arguments[i] + "\n";
}
__alert__(s);
}
delete __alert__;
})(window);
String.prototype.trim = function () { return this.replace(/(^\s*)|(\s*$)/g, ""); }
String.prototype.repeat = function (n) { var arr = new Array(n + 1); return arr.join(this); }
String.prototype.queryString = function (key) {
var sValue = this.match(new RegExp("[\?\&]" + key + "=([^\&]*)(\&?)", "i"));
return sValue ? sValue[1] : sValue
}
String.prototype.setKeyValue = function (key, value) {
if (this.queryString(key) != null) {
var reg = new RegExp("([\?\&])(" + key + "=)([^\&]*)(\&?)", "i");
return this.replace(reg, "$1$2" + value + "$4");
} else {
var add = arguments[2];
if (add === true) {
return this + (this.indexOf("?") > -1 ? "&" : "?") + key + "=" + value;
} else return this;
}
}
var JObj = {};
(function(_){
_.isObject = function (p) { return "object" == typeof (p) }
_.$ = function (p, doc) { return _.isObject(p) ? p : (doc || document).getElementById(p); }
_.$c = function(tag) { return document.createElement(tag); }
_.$tag = function(tag, node) { return _.$(undefined == node || null == node ? document : node).getElementsByTagName(tag); }
_.$class = function (className, obj) {
obj = _.$(obj) || document;
var objs = obj.all || _.$tag("*", obj);
var o, i, arr = [];
var classNames = "";
className = "," + className + ",";
for (i = 0; o = objs[i]; i++) {
classNames = "," + o.className.split(/\s+/).join(",") + ",";
if (classNames.indexOf(className) >= 0) {
arr.push(o);
}
}
delete objs;
return arr;
}
_.addRule = function (p, k, asNew) {
var style = _$c("STYLE");
_.$tag("HEAD")[0].appendChild(style);
var styleSheet = style.styleSheet || style.sheet;
if (styleSheet.addRule) {
var rs = p.split(',');
for (var i = 0; i < rs.length; i++)
styleSheet.addRule(rs[i], k);
} else if (styleSheet.insertRule) {
styleSheet.insertRule(p + "{" + k + "}", styleSheet.cssRules.length);
}
}
_.doFunction = function (fun) {
var args = [], i;
for (i = 1; i < arguments.length; i++) {
args.push(arguments[i]);
}
return function () {
fun.apply(null, args);
delete args;
};
}
_.addEvent = function(obj, type, fun) {
obj = _.$(obj);
if (obj.attachEvent) {
if (!/^on/.test(type))
type = 'on' + type;
obj.attachEvent(type, fun);
} else if (obj.addEventListener) {
if (/^on/.test(type))
type = type.substr(2);
obj.addEventListener(type, fun, false);
}
delete obj;
}
_.removeEvent = function(obj, type, fun) {
obj = _.$(obj);
if (obj.attachEvent) {
if (!/^on/.test(type))
type = 'on' + type;
obj.detachEvent(type, fun);
} else if (obj.addEventListener) {
if (/^on/.test(type))
type = type.substr(2);
obj.removeEventListener(type, fun, false);
}
delete obj;
}
_.getRuntimeStyle = function(obj, k, d) {
var v = null;
if (obj.currentStyle) {
k = k.replace(/\-(\w)/ig, function() { return arguments[1].toUpperCase(); });
if (k == 'float') k = 'styleFloat'; //ie,opera
v = obj.currentStyle[k];
} else {
if (k == 'styleFloat') k = 'float';
k = k.replace(/[A-Z]/g, function() { return '-' + arguments[0].toLowerCase(); });
v = window.getComputedStyle(obj, null).getPropertyValue(k);
}
if ((v == 'auto' || v == '') && d != undefined) v = d;
delete obj;
return v;
}
var fixCss = function() { return arguments[1].toUpperCase(); }
_.css = function(obj, rules) {
obj = _.$(obj);
var rule;
for (rule in rules) {
//rule = rule.replace(/\-(\w)/ig,function(){return arguments[1].toUpperCase();});
rule = rule.replace(/\-(\w)/ig, fixCss);
if (rule == 'float' && obj.currentStyle) rule = 'styleFloat';
if (/alpha|opacity/.test(rule)) {
if ($$.Browser.ie) {
obj.style.filter = 'alpha(opacity:' + rules[rule] + ')';
} else {
obj.style.opacity = rules[rule] / 100;
}
} else {
obj.style[rule] = rules[rule] + (/(width|height|positionX|positionY|top|left|right|bottom|fontSize)$/i.test(rule) && !isNaN(rules[rule]) ? 'px' : '')
}
}
delete obj;
}
})(JObj);
JObj.Browser = {};
(function(_){
var n_ = navigator;var b = n_.appName;var ua = n_.userAgent.toLowerCase();
_.userAgent = n_.userAgent;
_.name = "Unknow";
_.safari = ua.indexOf("safari") > -1;
_.chrome = ua.indexOf('chrome') > -1;
_.opera = ua.indexOf("opera") > -1;
_.firefox = ua.indexOf('firefox') > -1;
_.netscape = !_.firefox && !_.opera && !_.safari && (b == "Netscape");
_.ie = !_.opera && (b == "Microsoft Internet Explorer");
_.name = (_.ie ? "IE" : (_.firefox ? "Firefox" : (_.netscape ? "Netscape" : (_.opera ? "Opera" : (_.chrome ? "Chrome" : (_.safari ? 'Safari' : "Unknow"))))));
switch (_.name) {
case "Opera":
_.fullVersion = n_.appVersion.split(" ")[0];
break;
case "IE":
_.fullVersion = ua.substr(ua.indexOf("msie") + 5).split(";")[0];
break;
case "Firefox":
_.fullVersion = ua.substr(ua.indexOf("firefox") + 8);
break;
case "Safari":
_.fullVersion = ua.substr(ua.indexOf("version") + 8).split(" ")[0];
break;
case 'Chrome':
_.safari = false; ////
_.fullVersion = ua.substr(ua.indexOf('chrome') + 7).split(' ')[0];
break;
case "Netscape":
_.fullVersion = ua.substr(ua.indexOf("netscape") + 9);
break;
default:
_.fullVersion = "-1";
}
_.version = parseFloat(_.fullVersion);
})(JObj.Browser);
JObj.Debug = {};
(function(_){
var win;
_.console = function( ){
if(win == null || win.closed){
win = window.open("about:blank","Debug","width=200,height=400,location=no,resizable=yes,scrollbars=yes");
}
if(win == null)
alert("Please allow popup window");
else{
var s = Array.prototype.slice.apply(arguments).join("<br />");
win.document.write(s , "<br />");
}
}
})(JObj.Debug);
JObj.UI = {};
(function ($) {
var body = document.compatMode == 'CSS1Compat' ? document.documentElement : document.body;
$.ViewPort = function () {
var _ = this;
_.top = _.right = _.bottom = _.left = _.t = _.r = _.b = _.l = 0;
var numSort = function (a, b) {
a = Number(a), b = Number(b);
return a - b;
}
_.intersect = function (vp) {
if (_.hitTest(vp) || vp.hitTest(_)) {
var arr = [this.l, this.r, vp.l, vp.r];
arr.sort(numSort); //reverse();
var l = arr[1];
var r = arr[2];
arr = [this.t, this.b, vp.t, vp.b];
arr.sort(numSort); //reverse();
var t = arr[1];
var b = arr[2];
var v = new $.ViewPort();
v.l = l; v.r = r; v.t = t; v.b = b;
return v;
}
return false;
}
_.hitTest = function (vp) {
if (vp.inRect(this.l, this.t) ||
vp.inRect(this.r, this.t) ||
vp.inRect(this.r, this.b) ||
vp.inRect(this.l, this.b) ||
(vp.t < this.t && vp.b > this.b && vp.l > this.t && vp.r < this.r) ||
(vp.t > this.t && vp.b < this.b && vp.l < this.t && vp.r > this.r)
)
return true;
else
return false;
}
_.inRect = function (x, y) {
return (x >= this.l && x <= this.r) && (y >= this.t && y <= this.b);
}
}
$.getViewPort = function (o) {
var rect = o.getBoundingClientRect();
var rect2 = new $.ViewPort();
rect2.top = rect.top,
rect2.right = rect.right,
rect2.bottom = rect.bottom,
rect2.left = rect.left
// chrome 下 document.documentElement.scrollTop, scrollLeft 总是为 0
var at = body.scrollTop || document.body.scrollTop;
var al = body.scrollLeft || document.body.scrollLeft;
if (o == document.documentElement || o == document.body) {
rect2.t = at;
rect2.l = al;
rect2.r = body.clientWidth + rect2.l;
rect2.b = body.clientHeight + rect2.t;
} else {
rect2.t = rect.top + at;
rect2.l = rect.left + al;
rect2.r = rect.right + al;
rect2.b = rect.bottom + at;
}
return rect2;
}
})(JObj.UI);
var lazyloader_filter1 = function( img ){
return /dailyDealsProductImg_\d+/.test(img.id);
}
var LazyLoader = {};
(function($){
var cBorder = JObj.$("cBorder");
var body = document.compatMode == 'CSS1Compat' ? document.documentElement : document.body;
var container;
var imgs = {};
var filter = defaultFilter;
$.init = function( o, filterFun ){
container = JObj.$(o) || container;
var tmp = JObj.$tag("IMG", container);
if(filterFun instanceof Function)
filter = filterFun;
set(tmp);
JObj.addEvent(container, "onresize", calc);
JObj.addEvent(window, "onscroll", calc);
calc();
}
var calc = function(){
var img;
//JObj.Debug.console( "cRect: " + JObj.toSource( cRect ) , "bRect: " + JObj.toSource(bRect));
var cVp =JObj.UI.getViewPort(container).intersect( JObj.UI.getViewPort(body) );
var iVp;
if(cVp != false){
JObj.css(cBorder,{top:cVp.t, left:cVp.l, width:cVp.r - cVp.l - 6, height: cVp.b - cVp.t - 6});
for(var k in imgs){
img = imgs[k];
iVp = JObj.UI.getViewPort(img);
if( iVp.intersect(cVp) ){
img.setAttribute("src", img.getAttribute("_lazyloader_src"));
img.removeAttribute("_lazyloader_src");
delete imgs[k];
}
}
}
}
var defaultFilter = function( img ){
return true;
}
var set = function( tmp ){
var img;
for(i = 0; img = tmp[i] ;i++){
if( filter(img)){
img.setAttribute("_lazyloader_src", img.src);
img.removeAttribute("src");
imgs[i] = img;
}
}
}
})(LazyLoader);
LazyLoader.init("dailyDeals", lazyloader_filter1);
| Next > |
|---|