IntersectionObserver API js懶載入實現方法

阿新 • • 發佈：2020-06-29

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <style>
        #content {
            width: 100vw;
            height: 100vh;
        }

        #info {
            position: fixed;
            top:  
0;
        }

        #target {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>

</head>

<body>
    <div id="info">我藏在頁面底部，請向下滾動</div>
    <div id="content"></div>
    <div class="test">adsfasfd</div>
    <div id="target"></div>
    <div id="h" style="height:1000px;"></div>
    <div class="test">adsfasfd</div>
</body>
<!--  -->
<script type="text/javascript">
    function 
 query(selector) {
        return Array.from(document.querySelectorAll(selector));
    }
    let observer = new IntersectionObserver(function (entries) {
        entries.forEach(function (element, index) {
            // console.log(observer.takeRecords());
            if (element.isIntersecting) {
                info.textContent  
= "我出來了";
            } else {
                info.textContent = "我藏在頁面底部，請向下滾動"
            }
        });

    }, {
        root: null,
        threshold: [0, 1]
    })
    query(document.querySelectorAll('.test').forEach((item) => {
        observer.observe(item);
    }))
    // observer.observe(document.querySelectorAll('.test')[0])
</script>

</html>

IntersectionObserver API js懶載入實現方法

<!DOCTYPE HTML> <html> <head> <meta charset=\"utf-8\"> <meta name=\"apple-mobile-web-app-capable\" content=\"yes\" />

vue實現圖片懶載入的方法分析

本文例項講述了vue實現圖片懶載入的方法。分享給大家供大家參考，具體如下：

實現一個Vue自定義指令懶載入的方法示例

在專案中如果有大量的圖片需要載入的時候，就可以考慮使用懶載入了，懶載入其實就是監聽瀏覽器的滾動，當滾動到一定的範圍的時候就將圖片的真實路徑賦給src,然後取消監聽。實現的方法也比較簡單，可以通過懶載入的外

js抽獎轉盤實現方法分析

本文例項講述了js抽獎轉盤實現方法。分享給大家供大家參考，具體如下： HTML 這裡.left 固定了圓的寬度和高度，還有canvas也設定了固定寬高繪製圓心的座標也就出來了 (203,203)

VUE路由懶載入的方法小結

隨著專案的增大，我們需要將專案中的資源進行懶載入？那麼在vue專案中如何實現呢？

JS效能優化實現方法及優點進行

最近剛閱讀完《高效能javascript》，想談談對js效能優化的看法。理解有些不同，可能還需要各位多多提醒。

幾種路由懶載入實現方式

路由懶載入兩種方式： 1..Vue非同步載入技術 1：vue-router配置路由，使用vue的非同步元件技術，可以實現懶載入，此時一個元件會生成一個js檔案。2：component: resolve => require([\'放入需要載入的路由地址\'

利用原生JS實現懶載入lazyLoad的三種方法總結

目錄前言Method 1: 高度對比Method 2: 使用getBoundingClientRect() 的APIMethod 3: 採用最新的 IntersectionObserver 建構函式總結前言

JS圖片懶載入的優點及實現原理

這篇文章主要介紹了JS圖片懶載入的優點及實現原理,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

JS實現頁面資料懶載入

頁面資料懶載入。Div移動到可視區域再去ajax載入內容。最近有需求做頁面的多個table用於載入資料，但是使用者瀏覽頁面的時候不需要一次將頁面所有的東西加載出來，比如頁面上3個table就佔滿了，使用者點進去第一眼也

JS實現圖片懶載入(lazyload)過程詳解

對於圖片較多的頁面，使用懶載入可以大幅提高頁面載入速度，提高使用者體驗。

JS圖片預載入三種實現方法解析

預載入基本概念：當頁面開啟圖片提前載入，並且快取在使用者本地，需要用到時直接進行渲染；在瀏覽圖片較多的網頁（百度相簿，淘寶京東等），可以有更好的使用者體驗；

Js實現圖片的懶載入

　　在有些時候，我們在前端載入的圖片就很多，例如商城之類的網站，圖片就很多，那麼，我們一次性載入所有的圖片的肯定會影響效能，而且會佔用寬頻

JS圖片懶載入技術實現過程解析

懶載入技術懶載入（LazyLoad）是前端優化的一種有效方式，極大的提升使用者體驗，圖片一直是頁面載入的流浪大戶，現在一張圖片幾兆已經是很正常的事，遠遠大於程式碼的大小。

圖片懶載入原生js實現

demo1 圖片懶載入原始版本 // 繫結滾動事件 window.addEventListener(\'scroll\', function() {

vue實現路由懶載入的3種方法示例

前言路由懶載入在訪問頁面的時候非常重要，能夠提高首頁載入速度，避免出現載入時候白頁，如果沒有懶載入，webpack打包後的檔案會非常大。

js實現圖片懶載入原理

有時候一個網頁會包含很多的圖片，例如淘寶京東這些購物網站，商品圖片多隻之又多，頁面圖片多，載入的圖片就多。伺服器壓力就會很大。不僅影響渲染速度還會浪費頻寬。比如一個1M大小的圖片，併發情況下，達到1000併

js 圖片懶載入的實現

1.使用場景　　當網頁上有大量圖片需要載入時，如果一次性將圖片全部載入完，網頁載入時間會過長；

基於純JS實現多張圖片的懶載入Lazy過程解析

一、效果圖如下上面的效果圖，效果需求如下 1、還沒載入圖片的時候，預設顯示載入圖片背景圖

用原生JS實現圖片懶載入

技術標籤：JSjavascript 之前專案都是使用現成的lazyLoad之類的懶載入外掛，趁專案沒那麼趕的時候自己試著實現一下。