rem的使用和圖片懶加載

每個頁面都需要加

<script>
(function (doc, win, width) {
    var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 100 * (clientWidth / width) + 'px';
            };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window, 750);
</script>

圖片懶加載

//img設(shè)置一個自定義屬性,用來放真是的img路徑。用getAttribute獲取自定義屬性的值

 <script type="text/javascript">
   var aImg = document.querySelectorAll('img');
   var len = aImg.length;
   var n = 0;//存儲圖片加載到的位置,避免每次都從第一張圖片開始遍歷
   window.onscroll = function() {
      scroll_on();
   };
function scroll_on(){
     var seeHeight = document.documentElement.clientHeight;
     var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
     for (var i = n; i < len; i++) {
        if (aImg[i].offsetTop+500 < seeHeight + scrollTop) {
            // if (aImg[i].getAttribute('src') == '') {
                aImg[i].src = aImg[i].getAttribute('guoyu-src');
            // }
            n = i + 1;
            console.log('n = ' + n);
        }
    }
}
scroll_on();

</script>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,940評論 25 709
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,539評論 19 139
  • 里約奧運會時寫吉賽爾·邦辰的文,提到了她的前男友萊昂納多·迪卡普里奧。他們相戀的那五年還是小李子風(fēng)華正茂的時期,無...
    羋修閱讀 486評論 0 0
  • 時時花不來 好雨潤香腮 何處試春語 狐疑看柳開 2018年3月19日
    龍青閱讀 330評論 3 5
  • 每天早上都是很忙的,周日也不例外。因為想著上午把車送去保養(yǎng)再帶孩子們玩,所以時間還有點緊。早餐蒸了紫薯,又蒸蒸水蛋...
    劉月紅閱讀 248評論 0 0

友情鏈接更多精彩內(nèi)容