<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片懶加載原理及實(shí)現(xiàn)</title>
<script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
? ? <style>
? ? ? ? .container{
? ? ? ? ? ? max-width: 800px;
? ? ? ? ? ? margin:0 auto;
? ? ? ? }
? ? ? ? .container:after{
? ? ? ? ? ? content:"";
? ? ? ? ? ? display: block;
? ? ? ? ? ? clear:both; /*清除左右浮動(dòng)*/
? ? ? ? }
? ? ? ? .container img{
? ? ? ? ? ? width:50%;
? ? ? ? ? ? height:260px;
? ? ? ? ? ? float:left;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="container">
? ? ? ? <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img4.imgtn.bdimg.com/it/u=951914923,777131061&fm=26&gp=0.jpg">
? ? ? ? <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=637435809,3242058940&fm=26&gp=0.jpg">
? ? ? ? <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=3990342075,2367006974&fm=200&gp=0.jpg">
? ? ? ? <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=1813891576,1754763093&fm=26&gp=0.jpg">
? ? ? ? <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg">
? ? ? ? <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img4.imgtn.bdimg.com/it/u=1878067600,3935137756&fm=200&gp=0.jpg">
? ? ? ? <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img3.imgtn.bdimg.com/it/u=85690711,3884201894&fm=26&gp=0.jpg">
? ? ? ? <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=3844233833,3942617167&fm=200&gp=0.jpg">
? ? ? ? <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img0.imgtn.bdimg.com/it/u=1846695025,2515725663&fm=26&gp=0.jpg">
? ? ? ? <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img3.imgtn.bdimg.com/it/u=346230831,1833217134&fm=200&gp=0.jpg">
? ? ? ? <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img5.imgtn.bdimg.com/it/u=3478148120,2683867435&fm=26&gp=0.jpg">
? ? ? ? <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img5.imgtn.bdimg.com/it/u=2298824648,1812234339&fm=200&gp=0.jpg">
? ? ? ? <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=4201594846,4178139206&fm=26&gp=0.jpg">
? ? ? ? <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=484389598,819397330&fm=200&gp=0.jpg">
? ? ? ? <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=3729466012,914166979&fm=26&gp=0.jpg">
? ? ? ? <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=354463615,3836278171&fm=200&gp=0.jpg">
? ? ? ? <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img5.imgtn.bdimg.com/it/u=1831250492,3489827059&fm=200&gp=0.jpg">
? ? ? ? <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=779005622,2247570143&fm=200&gp=0.jpg">
? ? ? ? <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=1968229118,3512711019&fm=26&gp=0.jpg">
? ? ? ? <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=1088428253,1150170159&fm=200&gp=0.jpg">
? ? </div>
? ? ? ? <script>
? ? ? ? ? ? // 一開始沒有滾動(dòng)的時(shí)候，出現(xiàn)在視窗中的圖片也會(huì)加載
? ? ? ? ? ? start();
? ? ? ? ? ? // 當(dāng)頁(yè)面開始滾動(dòng)的時(shí)候，遍歷圖片，如果圖片出現(xiàn)在視窗中，就加載圖片
? ? ? ? ? ? //setTimeout(code,millisec); code,必需。要調(diào)用的函數(shù)后要執(zhí)行的 JavaScript 代碼串。 millisec,必需。在執(zhí)行代碼前需等待的毫秒數(shù)。
? ? ? ? ? ? //clearTimeout(id_of_settimeout); id_of_settimeout,由 setTimeout()返回的 ID 值。該值標(biāo)識(shí)要取消的延遲執(zhí)行代碼塊。
? ? ? ? ? ? var clock; //函數(shù)節(jié)流
? ? ? ? ? ? $(window).on('scroll',function(){
? ? ? ? ? ? ? ? if(clock){
? ? ? ? ? ? ? ? ? ? clearTimeout(clock);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? clock = setTimeout(function(){
? ? ? ? ? ? ? ? ? ? start()
? ? ? ? ? ? ? ? },200)
? ? ? ? ? ? ? ? console.log("clock:" + clock);
? ? ? ? ? ? })
? ? ? ? ? ? //.not(something)就是不包含括號(hào)里內(nèi)容，便簽、類、id、屬性等
? ? ? ? ? ? //.each() 例如 $('.container img').each()就是遍歷this下的所有元素
? ? ? ? ? ? function start(){
? ? ? ? ? ? ? ? $('.container img').not('[data-isLoading]').each(function () {
? ? ? ? ? ? ? ? ? ? if (isShow($(this))) {
? ? ? ? ? ? ? ? ? ? ? ? loadImg($(this));
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? ? ? // 判斷圖片是否出現(xiàn)在視窗的函數(shù)
? ? ? ? ? ? //$node.offset().top 文檔偏移到頂端的距離
? ? ? ? ? ? //$(window).height()代表當(dāng)前可見區(qū)域的大小,滾動(dòng)高度
? ? ? ? ? ? //$(document).scrollTop() 獲取垂直滾動(dòng)的距離 (即當(dāng)前滾動(dòng)的地方的窗口頂端到整個(gè)頁(yè)面頂端的距離)
? ? ? ? ? ? function isShow($node){
? ? ? ? ? ? ? ? return $node.offset().top <= $(window).height()+$(window).scrollTop();
? ? ? ? ? ? }
? ? ? ? ? ? // 加載圖片的函數(shù)，就是把自定義屬性data-src 存儲(chǔ)的真正的圖片地址，賦值給src
? ? ? ? ? ? function loadImg($img){
? ? ? ? ? ? ? ? ? ? $img.attr('src', $img.attr('data-src'));
? ? ? ? ? ? ? ? ? ? // 已經(jīng)加載的圖片，我給它設(shè)置一個(gè)屬性，值為1，作為標(biāo)識(shí)
? ? ? ? ? ? ? ? ? ? // 弄這個(gè)的初衷是因?yàn)?，每次滾動(dòng)的時(shí)候，所有的圖片都會(huì)遍歷一遍，這樣有點(diǎn)浪費(fèi)，所以做個(gè)標(biāo)識(shí)，滾動(dòng)的時(shí)候只遍歷哪些還沒有加載的圖片
? ? ? ? ? ? ? ? ? ? $img.attr('data-isLoading',1);
? ? ? ? ? ? }
? ? ? ? </script>
</body>
</html>
