整合 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 loadResponsive Lightbox

作者: 袖之欢

科技改变生活,编程改变世界。

发表评论

电子邮件地址不会被公开。 必填项已用*标注