如何自動載入微信網頁上的所有圖片

瀏覽微信公眾平台 (WeChat) 的網頁，需要等待每一張圖片的載入和顯示。透過執行 javascript 語法，可以一次載入網頁的所有圖片。

問題狀況:
觀察網頁原始碼 IMG 標籤在顯示前後的變化
1. 載入前:

data-src="http://mmbiz.qpic.cn/mmbiz_jpg/jbo6JwibjywKudqFtOz8VAjk9dMJA6dibsjLsbKtiaQx4ic2zMfODibX4iarOKkYicwiaM4D2c5ZgErc7ib2jA6lk4icOvtg/640?" ... src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg=="

2. 載入後:

data-src="http://mmbiz.qpic.cn/mmbiz_jpg/jbo6JwibjywKudqFtOz8VAjk9dMJA6dibsjLsbKtiaQx4ic2zMfODibX4iarOKkYicwiaM4D2c5ZgErc7ib2jA6lk4icOvtg/640?" ... src="http://mmbiz.qpic.cn/mmbiz_jpg/jbo6JwibjywKudqFtOz8VAjk9dMJA6dibsjLsbKtiaQx4ic2zMfODibX4iarOKkYicwiaM4D2c5ZgErc7ib2jA6lk4icOvtg/640?tp=webp&wxfrom=5&wx_lazy=1"

不同點在載入後 src 使用 data-src 的屬性。

方法1: 適用瀏覽器 Google chrome, Firefox, Safari
參考 javascript - Change attribute from data-src to src WITHOUT jQuery - Stack Overflow 文章 (Thanks, Harry!)，在 Google chrome 瀏覽器「開發人員工具」的 console 輸入以下 javascript 語法，即可一次載入該網頁的所有圖片。

var imgEl = document.getElementsByTagName('img');
for (var i=0; i<imgEl.length; i++) {
if(imgEl[i].getAttribute('data-src')) {
imgEl[i].setAttribute('src',imgEl[i].getAttribute('data-src'));
}
}

更新 (2017-11-22):
(1) 先安裝瀏覽擴充套件 Tampermonkey (適用瀏覽器: Google chrome, Firefox, Safari, Opera & Edge)
(2) 到 Show image directly on weixin web 網站安裝 user script。

方法2: 適用瀏覽器 Google chrome; 不適用: Firefox (遇到 Content Security Policy 錯誤), Safari
在 Google chrome 瀏覽器網址列輸入以下 javascript 語法。請注意複製貼上到網址列後，chrome 會自動移掉最前面的 javascipt: 文字，需要手動輸入回去。

javascript: (function(){
var imgEl = document.getElementsByTagName('img');
for (var i=0; i<imgEl.length; i++) {
if(imgEl[i].getAttribute('data-src')) {
imgEl[i].setAttribute('src',imgEl[i].getAttribute('data-src'));
}
} })();

方法3: 適用瀏覽器 Google chrome, Firefox; 不適用: Safari
如果不想每次瀏覽微信網頁要手動輸入上面的 javascipt 語法，可以使用 Tampermonkey 瀏覽器擴充套件的自訂用戶腳本 (user script)。如下圖除了輸入 javascipt 語法，在 @match 該行要輸入 https://mp.weixin.qq.com/* 才能套用在微信網頁。