Nivo Slider 在chrome 或 Safari 中問題處理筆記
最近 jQuery 中的套件 NivoSlider 受到很多網站的歡迎，在最近幾個案件中也用上這個套件，在外觀上幾乎每個瀏覽器都正常，不過如果在 chrome 、 safari 這兩個 webkit 為核心瀏覽器中會發現換圖之前，原先的圖會先閃一下，然後後面的圖才會進入。
如果觀察 server log 檔，就會發現 chrome 在每次換圖時都會再次載入圖片，就是因為每次圖片都重新載入，導致圖片會閃一下，除此之外不斷重載圖片也使網站量費不必要的頻寬。
知道這點之後就可從圖片快取下手，如果是 php 或程式輸出圖檔
首先加入
header("Cache-Control: private, max-age=1800");
這行可以讓瀏覽器使用快取，但！對 chrome 還是無效，必須再補上
header("Pragma: cache");
才能使 chrome 取用 cache 。
如此既解決網站流量虛耗問題，也解決過場效果閃動問題。
如果觀察 server log 檔，就會發現 chrome 在每次換圖時都會再次載入圖片，就是因為每次圖片都重新載入，導致圖片會閃一下，除此之外不斷重載圖片也使網站量費不必要的頻寬。
知道這點之後就可從圖片快取下手，如果是 php 或程式輸出圖檔
首先加入
header("Cache-Control: private, max-age=1800");
這行可以讓瀏覽器使用快取，但！對 chrome 還是無效，必須再補上
header("Pragma: cache");
才能使 chrome 取用 cache 。
如此既解決網站流量虛耗問題，也解決過場效果閃動問題。
