過去都是使用 jquery lazy load js 來實作延遲載圖，
其運作原理是偵測scroll事件以及img物件的相對位置來決定要不要load圖片

現在有更簡單的方式，就是用 IntersectionObserver API 這個 Web標準
來偵測 img 物件是不是進入可視 webview 範圍
https://developers.google.com/web/updates/2016/04/intersectionobserver

document.addEventListener("DOMContentLoaded", function() {

var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));;



if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {

    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {

     entries.forEach(function(entry) {

        if (entry.isIntersecting) {

         let lazyImage = entry.target;

         lazyImage.src = lazyImage.dataset.src;

         lazyImage.srcset = lazyImage.dataset.srcset;

         lazyImage.classList.remove("lazy");

         lazyImageObserver.unobserve(lazyImage);

        }

     });

    });



    lazyImages.forEach(function(lazyImage) {

     lazyImageObserver.observe(lazyImage);

    });

}

//這裡可以加上else處理萬一瀏覽器不支援的狀況

});

網頁裡面只要用  <img data-src='圖片網址' class='lazy' />  就可以啦

IntersectionObserver API
目前 Can I Use 網站顯示大部分 browser 都支援，iOS safari 要 12.2 版才支援
應該可以放心使用


 

昨晚突然出現大量的Exception，發現是某個IP攻擊網站，所以就直接使用IIS擋IP方式阻擋該IP的攻擊，但是設定之後，發現Exception還是一直出來。但是束手無策....直到一個多小時後才停止攻擊。

事後翻出IIS Log看結果



發現IIS擋IP有發揮作用(status:403) 但是會有漏網之魚(status:302-其實status是500)
檢查 "23:10:46" 一秒內受到 36 次攻擊 但是漏掉了 8 個 -> 失敗率約兩成

結論:
1. 對於阻斷攻擊，可能還需要程式上做處理，例如 begin_request 時檢查
2. Log Parser 真是看 log 最佳工具....

今天去亞卡讀書會剛好有提到跨站的 ajax
除了JSONP之外，其實W3C也有訂標準
http://www.w3.org/TR/cors/
https://developer.mozilla.org/zh-TW/docs/HTTP/Access_control_CORS
基本精神就是
A網站呼叫B網站
A網站的Request Header要加上 Origin: (這個瀏覽器會自動加上)
B網站Response Header要加上一些 Access-Control-Allow-Origin:
這樣就可以通了 不過Request並不會帶上B網站的cookies
若是希望 Request 時也要送上 cookies 資訊，則http物件要加上 .withCredentials = true
不過 IE7以下確定是不支援這的機制，IE8以上則還要測看看

 

當A網站的網頁裡面開一個iframe連結到B網站的網頁
結果B網站的Cookies卻一直無法寫入，最常顯示的狀況是session無效
如果發生這樣的狀況 請記得在 IIS 設定 http header, "P3P"
詳細參考 http://adamyoung.net/IE-Blocking-iFrame-Cookies
也可以參考 w3c P3P