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處理萬一瀏覽器不支援的狀況
});資料來源：http://www.dotblogs.com.tw/demarco/archive/2010/08/03/16980.aspx
為了減輕server loading
圖片的顯示 加上了JQuery外掛 Lazy Load
讓圖片延遲載入
瀏覽器 拉到該可視範圍內
圖片才載入
前提必須有jquery
接著需下載
queryLoader.js
jquery.lazyload.mini.js
塞進所用呈現的檔案內
<head>
<title>test</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<link rel="stylesheet" href="queryLoader.css" type="text/css" />
<script type='text/javascript' src='jquery.lazyload.mini.js'></script>
</head>
並加上
<script type="text/javascript">
$("img").lazyload({ effect: "fadeIn" });
</script>
img就是html的
<img src="/images/001.gif" />
下載Lazy Load網址：http://www.appelsiini.net/projects/lazyload