js實現一個長頁面中的圖片懶載入即滾動到其位置才載入

阿新 • • 發佈：2019-01-14

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {
            display: block;
            margin-bottom: 50px;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
    <img src="" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
    <img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
    <img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
</body>

<script>
    var num = document.getElementsByTagName('img').length;
    var img = document.getElementsByTagName("img");
    var n = 0; //儲存圖片載入到的位置，避免每次都從第一張圖片開始遍歷
    lazyload(); //頁面載入完畢載入可是區域內的圖片
    //window.onscroll = lazyload;
    function lazyload() { //監聽頁面滾動事件
        var seeHeight = document.documentElement.clientHeight; //可見區域高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滾動條距離頂部高度
        for (var i = n; i < num; i++) {
            if (img[i].offsetTop < seeHeight + scrollTop) {
                if (img[i].getAttribute("src") == "") {
                    img[i].src = img[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }
	
	
	
// 簡單的節流函式
//fun 要執行的函式
//delay 延遲
//time  在time時間內必須執行一次
function throttle(fun, delay, time) {
    var timeout,
        startTime = new Date();
    return function() {
        var context = this,
            args = arguments,
            curTime = new Date();
        clearTimeout(timeout);
        // 如果達到了規定的觸發時間間隔，觸發 handler
        if (curTime - startTime >= time) {
            fun.apply(context, args);
            startTime = curTime;
            // 沒達到觸發間隔，重新設定定時器
        } else {
            timeout = setTimeout(function(){
	            fun.apply(context, args);
            }, delay);
        }
    };
};
// 實際想繫結在 scroll 事件上的 handler
//function lazyload(event) {}
// 採用了節流函式
window.addEventListener('scroll',throttle(lazyload,500,1000));

</script>
</html>

js實現一個長頁面中的圖片懶載入即滾動到其位置才載入

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style>

手把手教小白如何用css+js實現頁面中圖片放大展示效果

1.前言很多童鞋會在專案中遇到一些上傳圖片，展示圖片的操作，但是圖片呢有大有小，為了頁面的美觀，有時候我們需要將圖片展示成固定寬高度，但是呢，領導就會說，我想看大圖片，怎麼辦？想看就看呀，來來來，我

原生JS判斷頁面中圖片載入完成

自己寫的判斷頁面中圖片載入完成的方法，用原生JS完成，不用jq主要考慮在不載入jq的情況下，程式碼可以正常執行判斷指定ID的盒子中所有圖片載入，demo程式碼如下： <!DOCTYPE HTML> <html> <head> &l

頭像上傳剪裁預覽功能js實現，以及Safari中一個坑。

// 彈窗 layui.use('layer', function(){ var layer = layui.layer; // 上傳圖片 $('.tc').click(function(){ layer

js實現一個簡單的登錄頁面

for str amp ntb mar 登錄失敗 .get border rip <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t

js實現pdf對頁面的打印

點擊 dataurl png mage esp 數據轉化 project java //-------------------------------點擊打印的圖標--------------------------------- <div class=

js實現ctrl+v粘貼圖片或是截圖

環境 fileread tar str div stand listen nod null 瀏覽器環境：谷歌瀏覽器 1.ctrl+v粘貼圖片都是監聽paste時間實現的，復制的數據都存在clipboardData下面，雖然打印顯示數據長度為0，但是還是可以獲取數據的 2

js實現html截圖生成圖片

creat url 風格 then 朋友 ctx str 推薦 pre 　沒有華麗的開場，直入主題，這就是題主隨筆風格。隨筆既是日常工作積累，也可理解是個工作筆記，方便日後用到之處快速的有方可尋。　先講一個需求場景：定制網頁截圖傳給服務器端保存，用戶關註公眾號後

原生js實現一個DIV的碰撞反彈運動

絕對定位 doc type har tle ntb inpu wid PE 原生js實現一個DIV的碰撞反彈運動：　　關鍵在於DIV的邊界檢測，進而改變運動方向，即可實現碰撞反彈效果。 <!DOCTYPE html> <html

js 實現一個普通的定時器

時間 javascrip 調用 button size code get star lang HTML的頁面顯示： 1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8">

JS 實現定時操作隱藏顯示圖片（setInterval() clearInterval()）

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> function init()

如何用原生JS實現一個簡單的promise

　　　我又又又回來了，最近真是累的跟狗一樣，急需一個大保健回覆一下子精力　　　我現在是一邊喝著紅牛一邊寫著部落格，好了好了，不扯了，迴歸整體好吧　　　先簡單來說一下啥是promise吧　　　它是什麼？Promise是一個方案，用來解決多層回撥巢狀的解決方案。它現在是ES6的原生物件。　　 &n

js實現手機web頁面定位

《Java》Java實現一個“計算文字中某個詞出現頻率”的應用程式

一、目的計算某個詞出現頻率，可以很好的對一篇文章水平的評價提供客觀依據，比如在技術類文章中出現“的”字的頻率太高，說明此文章邏輯不夠嚴謹，本次應用程式的目的就是計算出指定文字中指定詞出現的頻率。二、程式演示有如下一個文字檔案w.txt，我們計算“的”字出

原生JS實現一個完整的輪播圖

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

JS實現一個簡單的輪播圖

主要程式碼如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte

解決頁面中圖片尺寸的問題

上次在做某些諮詢頁詳情的時候，發現頁面中的圖片會撐開頁面的寬度，如果只是設定100%的寬度，又有被拉伸的尷尬。網上查閱之後，找到了根據設定css來解決的方法： img{ // 保證圖片可以以原尺寸顯示 width: auto; height: auto; // 保

用js實現一個簡單的mvvm

這裡利用的object.defineproperty() 方法; <input id='input'><p id='p'><p/>js: const data={}; const input=documen

require.js載入highcharts.js/exporting.js實現圖表的繪製和圖片檔案功能的匯出

第一步：在require.js的做資料檔案中(data-main)對應的檔案中進行require.config配置，程式碼如下： require.config({ paths: { 'highcharts': '../libs/highcharts/Highcha

一個jsp頁面中多個提交按鈕提交不同的頁面

<span style="font-size:24px;">登入註冊頁面：</span> form action="LoginServlet" name="loginform" method="post">

js實現一個長頁面中的圖片懶載入即滾動到其位置才載入

相關推薦