JavaScript實現圖片的延遲載入
JavaScript Lazy image loading | The Matthias Chronicles
無需Jquery等庫:
無需Jquery等庫:
<script type="text/javascript"> function AddWindowEvent(elm, evType, fn, useCapture) { if(elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; } else { elm['on' + evType] = fn; return(true); } return(false); } function InitializeLazyLoading() { AddWindowEvent(window,'scroll',LazyLoadImage,false); LazyLoadImage(); } function IsViewPort(e) { var mx=0, my=0, tx=0, ty=0; var scrOfX=0, scrOfY=0; if(typeof(window.innerWidth) == 'number') { mx = window.innerWidth; my = window.innerHeight; } else // Below is single line if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { mx = document.documentElement.clientWidth; my = document.documentElement.clientHeight; } else // Below is single line if(document.body && (document.body.clientWidth || document.body.clientHeight)) { mx = document.body.clientWidth; my = document.body.clientHeight; } if(typeof(window.pageYOffset) == 'number') { scrOfY = window.pageYOffset; scrOfX = window.pageXOffset; } else // Below is single line if(document.body && (document.body.scrollLeft || document.body.scrollTop)) { scrOfY = document.body.scrollTop; scrOfX = document.body.scrollLeft; } else // Below is single line if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) { scrOfY = document.documentElement.scrollTop; scrOfX = document.documentElement.scrollLeft; } tx=mx+scrOfX; ty=my+scrOfY; // Below is single line if(e.offsetLeft>=scrOfX && e.offsetTop>=scrOfY && e.offsetLeft<=tx && e.offsetTop<=ty) return true; else return false; } function LazyLoadImage() { var Imgs; var i; var e; Imgs=document.getElementsByTagName('img'); for(i=0; i<Imgs.length; i++) { e=Imgs[i]; if(e.src!=e.alt && IsViewPort(e)==true) e.src=e.alt; } } window.onload=InitializeLazyLoading; </script> 用法: <img src="(placeholder image)" alt="real image"> <p class="indent"> |
相關文章
- 圖片延遲載入策略(JavaScript)JavaScript
- javascript實現延遲載入效果JavaScript
- 專案分享六:圖片的延遲載入
- Echo.js – 簡單易用的 JavaScript 圖片延遲載入外掛JSJavaScript
- js:原生多張圖片延遲載入(圖片自己找)JS
- JS圖片延遲載入分析及簡單的demoJS
- Jquery.ScrollLoading圖片延遲載入技術jQuery
- JavaScript 中的延遲載入屬性模式JavaScript模式
- 影像延遲載入 && 列表圖順序載入
- 在AngularJS中實現一個延遲載入的DirectiveAngularJS
- 【漸進】延遲載入機制的簡易實現(上)
- 30行Javascript程式碼實現圖片懶載入JavaScript
- 利用CSS、JavaScript及Ajax實現圖片預載入CSSJavaScript
- 圖片懶載入實現
- Mybatis延遲載入、快取MyBatis快取
- Hibernate 延遲載入原理
- 延遲載入 Dex 檔案
- 圖片懶載入js實現JS
- 關於延遲載入,立即載入的問題
- HT for Web的HTML5樹元件延遲載入技術實現WebHTML元件
- EF中延遲載入的那些事
- 基於HTML5樹元件延遲載入技術實現HTML元件
- 滾動載入圖片(懶載入)實現原理
- javascript圖片懶載入與預載入的分析JavaScript
- mybatis延遲載入和快取MyBatis快取
- 實現圖片懶載入(throttle, debounce)
- [譯] 原生實現圖片懶載入
- React如何實現圖片懶載入React
- 實現圖片懶載入(Lazyload)
- 如何實現 SAP UI5 的 Lazy Loading(延遲載入,懶載入)試讀版UI
- Spring Boot 2.2 中的延遲載入Spring Boot
- mybatis入門基礎(七)----延遲載入MyBatis
- 實現圖片懶載入的三種方式
- 利用CSS、JavaScript及Ajax實現圖片預載入的三大方法CSSJavaScript
- Javascript圖片預載入詳解JavaScript
- 如何實現一個圖片載入框架框架
- RabbitMQ實現延遲佇列MQ佇列
- RabbitMQ 實現延遲佇列MQ佇列