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

浏览器如何加载网页 — JavaScript PerformanceTiming

在地址栏中输入一个 url,发生了哪些事情?

  1. 输入 blog.zhengxianjun.com
  2. 浏览器查找域名的 IP 地址
    1. 查找浏览器 hosts 缓存
    2. 查找系统缓存——本机 hosts 文件
    3. 查找最近的本地域名服务器(LDNS)
    4. (LDNS)查找 Root Server->返回所在域的 gTLD Server(全球共13台国际顶级域名服务器)->查找域名对应的 Name Server->匹配域名和 IP 映射表->返回IP记录以及 TTL->LDNS 缓存并返回给浏览器
  3. 浏览器向服务器发起一个 HTTP 请求报文
    1. 应用层协议 HTTP 通过TCP报文发送到服务器
    2. TCP 3次握手(HTTP 1.0 规定服务器处理完成后立即断开TCP连接,1.1 版本)
    3. 返回 HTTP 报文,如果包含重定向信息,浏览器进行重定向(重定向次数限制)
  4. 服务器处理请求,并返回 HTTP 响应报文
  5. 浏览器接收 HTML,分析 HTML 中的资源(图片、样式、音视频),继续请求
  6. 浏览器呈现网页

JavaScript 提供的 PerformanceTiming 接口详述了各个阶段发生的时间点。

PerformanceTiming 定义

PerformanceTiming 所有属性均为只读。

PerformanceTiming 示例

网页加载时间示例

w3 文档地址:http://www.w3.org/TR/navigation-timing/