因为博客文章展示页面宽度有限制，一些文章使用到的图片原始宽度会超出，导致图像显示时必须压缩宽度，使得图像模糊。比如浏览器如何加载网页 — JavaScript PerformanceTiming中的第一张图片。所以考虑增加一个图像浏览插件，使得点击图像使得点击图片使能够弹出较大的对话框，尽可能按原始宽度展示图像。
今天尝试了几款，最终选择了 Responsive Lightbox by dFactory。
在使用这款插件时遇到了几个问题：
- 文章的图像没有设置链接，点击图像没有响应
- 文章的图像使用了懒加载，无法识别正确的图像地址
关于第一点，在试用的插件中均遇到了这个问题，也就意味着即使今后在文章中添加图片时一并添加链接，以前的文章仍然无法使用这个功能。(修改所有历史文章不是一个明智的选择)
关于第二点，由于这些插件都没有解决第一个问题，所以刚开始考虑把懒加载去掉。
查看了一下 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。