圖片lazyload兼容無腳本的小改進

剛剛改進了一下某個頁面的圖片lazyload功能。

原先是用jquery的lazyload插件的標準方式做的。有一個缺點是腳本不開啓時圖片都不顯示了。

解決方法也不難，就是同時插一個noscript標籤。lazyload插件官網給出的解決方案也是如此。

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

不過這個方式帶來雙份的代碼，且還要額外的樣式表切換（避免無腳本時也出現用於有腳本時的佔位圖片）。

其實腳本本來就可以做任何事情，我們完全可以直接提取noscript裏的部分。以下是代碼示例

1. 模板部分（Jade）：

span.thumb
	if (imgSrc)
		if index >= 10
			noscript: img(src=imgSrc, alt='')
		else
			img(src=imgSrc, alt='')
	else
		img(src='default.png', alt='')

注：暫時設定了前10項不用lazyload。

2. 腳本部分：

script(src="jquery.lazyload.min.js")
script
	$(function(){
		var imgs = $('span.thumb:has(noscript:contains(img))')
		$(window).on('scroll', function(evt){
			var showImgs = imgs.filter(':in-viewport')
			showImgs.html(function(){ return $(this).find('noscript').text() })
			imgs = imgs.not(showImgs)
		})
	})

注：
:has(selector)是jQuery支持的僞類，表示子代元素必須匹配指定selector。
:contains(text)也是jQuery支持的僞類，表示元素包含指定的文本。因爲noscript裏的部分被作爲文本節點，所以這裏其實是比較隨意的，比如<noscript>sex img</noscript>也會匹配。
:in-viewport是lazyload插件擴展的僞類，表示元素是否處於窗口可見區域。

當然以上的方式的缺點就是無法使用lazyload插件的標準方式和其他功能（比如漸現），但這足以作爲一個PoC，我有空完善下再給lazyload作者發個pull request（或者哪位讀者願意做這個事情也很好啊）。