标签： 插件

整合 Advanced lazy load 与 Responsive Lightbox

因为博客文章展示页面宽度有限制，一些文章使用到的图片原始宽度会超出，导致图像显示时必须压缩宽度，使得图像模糊。比如浏览器如何加载网页 — JavaScript PerformanceTiming中的第一张图片。所以考虑增加一个图像浏览插件，使得点击图像使得点击图片使能够弹出较大的对话框，尽可能按原始宽度展示图像。

今天尝试了几款，最终选择了 Responsive Lightbox by dFactory。

启用 Responsive Lightbox

在使用这款插件时遇到了几个问题：

  1. 文章的图像没有设置链接，点击图像没有响应
  2. 文章的图像使用了懒加载，无法识别正确的图像地址

关于第一点，在试用的插件中均遇到了这个问题，也就意味着即使今后在文章中添加图片时一并添加链接，以前的文章仍然无法使用这个功能。(修改所有历史文章不是一个明智的选择)

关于第二点，由于这些插件都没有解决第一个问题，所以刚开始考虑把懒加载去掉。

查看了一下 Responsive Lightbox 的文件 responsive-lightbox/js/front.js ，发现它是查询特定 a 标签：

$( 'a[rel*="' + rlArgs.selector + '"], a[data-rel*="' + rlArgs.selector + '"]' )

设想可以通过 JavaScript 给图片追加 a 标签：

$('img[src]').each(function() {
	var src, img = $(this);
	if (img.parent().prop('tagName') == 'A') {
		return;
	}
	// 1, 兼容 lazy load; 2, 兼容未设置链接的图片
	src = img.attr('imageholder') || img.attr('src');
	if (src) {
		$('<a data-rel="' + rlArgs.selector + '[lightbox[gallery-AAAA]" href="' + src + '" target="_blank"></a>')
			.insertBefore(img)
			.append(img);
	}
});

if (window.innerWidth < 480) {
	return false;
}

判断 window.innerWidth，是因为在手机上展示效果不够理想。

至此，在改动较少且不影响体验和增加图片下载的前提下整合了 Advanced lazy load 和 Responsive Lightbox。