jQuery lightBox plugin 源码读后感【原创】

最新推荐文章于 2020-01-31 11:38:05 发布

原创最新推荐文章于 2020-01-31 11:38:05 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#lightbox #jQuery #源代码 #分析 #ViewUI

Javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍jQuery Lightbox插件的功能与实现细节，包括图片缩放、预加载技术及全屏遮罩实现方法。

jQuery lightBox plugin简介：

Lightbox应该是目前为止最流行的图片浏览插件。jQuery lightBox plugin是作者Leandro Vieira Pinho基于Lightbox2改编的jQuery插件。

功能列表：

自动根据窗口的大小缩放图片
模式窗口，幻灯片方式播放
图片内容预加载
渐变动画效果。

官网地址：

http://leandrovieira.com/projects/jquery/lightbox/

代码介绍：

1，巧妙利用jQuery选择器

使用jQuery lightBox plugin不需要更改你的HTML代码，仅把希望显示的一系列图片url设置在一系列对应的<a>标签的href链接中。利用jQuery选择器获得图片列表，图片列表调用lightBox方法。

 $('#gallery a').lightBox();

2，图片列表信息保存在自定义二位数组settings.imageArray中

for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
	settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
}

这个数组将在预加载图时用到，来获取前后图片的src数据。

3，over-lay 【全屏半透明遮罩】

jQuery lightBox plugin的over-lay实现全页面大小的半透明遮罩，遗憾的是

/**  THIRD FUNCTION
	* getPageSize() by quirksmode.com
	*
	* @return Array Return an array with page width, height and window width, height
*/
function ___getPageSize()

引用的第三方计算页面尺寸的方法有bug，其二，由于浏览器兼容问题，firefox得到的页面宽度width和长度height都比实际大。

所以个人认为，实现全页面不如实现全屏幕半透明遮罩。通过css的position:fixed定位功能使全屏幕半透明遮罩静止在屏幕上，即使拖动滚动条也不会动。修改lightBox css文件:

#jquery-overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}

由于万恶的IE6不支持position:fixed的属性，我们需要利用expression在CSS中写点针对IE6的东东：

/*IE6 fixed*/
* html #jquery-overlay {
	*position: absolute; 
	*left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);
	*top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);
}

4，图片预加载技术

HTML DOM Image 对象代表嵌入的图像。<img> 标签每出现一次，一个 Image 对象就会被创建。src 属性可设置或返回图像的 URL。当把该属性设置为新图像的 URL 时，浏览器就会把那幅新图像装载并显示出来。

jQuery lightBox plugin使用图片预加载技术实现了两个功能：

提前获取即将加载图片的宽度和长度尺寸：

// Image preload process
var objImagePreloader = new Image();
objImagePreloader.onload = function() {
	$('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]);
// Perfomance an effect in the image container resizing it
     _resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
//	clear onLoad, IE behaves irratically with animated gifs otherwise
	objImagePreloader.onload=function(){};
};
objImagePreloader.src = settings.imageArray[settings.activeImage][0];

首先，创建空的图片对象new Image()；其次为图片对象src属性赋图片URL值，这样浏览器就开始加载被赋值URL对应的图片；最后，图片加载完毕之后调用onload事件句柄，获取图片尺寸。

2. 功能而在用户观看当前图片时，预先加载前后两边的图片，以此提高图片加载速度。

/**
	* Preload prev and next images being showed
	*
*/
function _preload_neighbor_images() {
	if ( (settings.imageArray.length -1) > settings.activeImage ) {
		objNext = new Image();
		objNext.src = settings.imageArray[settings.activeImage + 1][0];
	}
	if ( settings.activeImage > 0 ) {
		objPrev = new Image();
		objPrev.src = settings.imageArray[settings.activeImage -1][0];
	}
}

同样通过创建空图像对象赋值src方法预加载图像。