2. 程式人生 > >原生javascript圖片懶載入效果程式碼。

原生javascript圖片懶載入效果程式碼。

阿新 • • 發佈：2019-02-16

原理是先獲取頁面所需懶載入的所有圖片物件，然後分別計算圖片距離頂部的距離是否小於螢幕可見高度+頁面滾動高度，即元素是否從下滾動到眼球可見位置，如果小於，那麼將自定義的data-src屬性中的值（即圖片的URL地址賦值給src屬性，完成請求載入）。監聽頁面滾動事件即可！定義n 值儲存起來可以更好的記錄到滾動可見的圖片，避免重複迴圈，提高效能。

<!doctype html>

<html>

<head>

    <title>index</title>

    <meta charset="utf-8">

    <meta
 
 name="renderer" content="webkit">

    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >

    <meta name="keywords" content="{$web['web_key']}"> <!--關鍵詞-->

    <meta name="description" content="{$web['web_description']}">  <!--網站描述-->


</head>

<body
 
>

    <div style="width:100%;overflow:hidden;"> <!--容器標籤開始-->

    <!--header start-->

        <include file="common/header"/>

    <!--header end-->





    <!--mainBox start-->

    <div class="main">

        <div class="article-list">

            <div
 
 class="container title">

                <h5>註冊香港公司相關資料</h5>

                <!-- <a href="" class="more">檢視全部 >></a> -->

            </div>

            <div class="container list">

                <foreach name="art" item="value">

                    <dl>

                        <dt>

                            <img src="" alt="" title="{$value['art_title']}" data-src="">

                        </dt>

                        <dd class="title">

                            <a href=""><strong></strong></a>

                        </dd>

                        <dd class="detail">

                            {$value['art_intro']}

                        </dd>
                        <dd class="detail">{$value['art_addtime']|date="Y-m-d H:i:s",###}</dd>
                        <dd class="consolution">

                            <!-- <a href="" target="_blank">立即諮詢>></a> -->
                            <a href="" title="" target="_blank">瞭解更多>></a>
                        </dd>

                    </dl>

                </foreach>

            </div>

        </div>





        <!--footer start-->

            <include file="common/footer"/>

        <!--footer end-->

    </div>

    <!--mainBox end-->



    </div><!--容器標籤結束-->

</body>
<script>
!function(){
    //獲取元素距離頁面頂部的絕對距離
    function getAbsPoint(e)
    {
        var x = e.offsetLeft;
        var y = e.offsetTop;
        while(e = e.offsetParent)   
        //等同於while(e.offsetParent){e = e.offsetParent}
        {
            x += e.offsetLeft;
            y += e.offsetTop;
        }
        return {'x': x, 'y': y};
    };

    var imgs = document.getElementsByTagName("img");
    var num = imgs.length;
    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 (getAbsPoint(imgs[i]).y < seeHeight + scrollTop) {

                if (imgs[i].getAttribute("src") == "") {
                    imgs[i].src = imgs[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }
}();
</script>
</html>

相關推薦

原生javascript圖片懶載入效果程式碼。

原理是先獲取頁面所需懶載入的所有圖片物件，然後分別計算圖片距離頂部的距離是否小於螢幕可見高度+頁面滾動高度，即元素是否從下滾動到眼球可見位置，如果小於，那麼將自定義的data-src屬性中的值（即圖片的

簡單A/BTest驗證圖片懶載入效果

文章結構 文章基本思路：“目的 => 方案 => 驗證 => 總結啟發” 一，圖片懶載入實現 二，預期效果 三，A/BTest驗證 四，總結 一，圖片懶載入實現 方案選擇 圖片懶載入的本質是將某一圖片的載入推遲到使用者看到或即將看到該圖

JavaScript 圖片區域性放大鏡效果程式碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x

30行Javascript程式碼實現圖片懶載入

小編推薦：Fundebug專注於JavaScript、微信小程式、微信小遊戲，Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務，眾多大佬公司都在使用。 前言 頁面太多圖片？那麼請你花20分鐘去優化一下頁面的效能 講道理，當你為圖片的src賦值時，D

原生JS的（可視區域，向上滾動向下滾動兩種）圖片懶載入

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

echo.js改造 實現可視區域圖片懶載入，lazyload效果

原來的echo.js有個缺點，快速滾動的時候不載入圖片，按住滾動條不放的時候圖片不載入，造成圖片空白不符合專案要求 改進程式碼如下： <script src="echo.min.js"></script> <script type="text

“瀑布流式”圖片懶載入程式碼示例

最近專案使用到了“懶載入”，現在更新一般，因為平時主要使移動端的開發所以庫檔案使用的是zepto.js 。當然也可以和jQuery 通用。 程式碼如下： /** * Created by zhiqiang on 2015/10/14. * [email&

基於javascript實現圖片懶載入（適用於pc端與h5）

這篇文章主要介紹了javascript實現圖片懶載入的方法及思路，在實際開發中有時我們需要用懶載入，也就是延遲載入圖片的方式，來提高網站的親和力,需要的朋友可以參考下。 一、定義 　　圖片延遲載入也稱為懶載入，延遲載入圖片或符合某些條件時才載入某些圖片，通常用於圖片比

javascript實現圖片懶載入和預載入

所謂懶載入就是通過某些特定的條件，然後再給圖片的src賦值，常見的懶載入方式有點選載入和滾動載入。 如果是點選載入，那麼一般是通過點選事件。例如： 然後新增點選事件: 效果如下: 如

佔位圖和圖片懶載入專案實戰詳解

佔位圖（兜底圖）： 真實圖片太大還沒有載入完之前先用一張佔位圖表示這個位置將來會有圖片或者說明這個位置是有圖片的但是不知道什麼原因真正的圖片沒有加載出來使用者只能看到這張佔位圖； 什麼是圖片懶載入： 懶載入也就是延遲載入，當訪問一個頁面的時候，先把img元素渲染出來，但是不給它真

vue 圖片懶載入 vue-lazyload

圖片懶載入 在實際的專案開發中，我們通常會遇見這樣的場景：一個頁面有很多圖片，而首屏出現的圖片大概就一兩張，那麼我們還要一次性把所有圖片都加載出來嗎？顯然這是愚蠢的，不僅影響頁面渲染速度，還浪費頻寬。這也就是們通常所說的首屏載入，技術上現實其中要用的技術就是圖片懶載入--到可視區域再載入。 vue中經常使

做圖片懶載入的步驟

1、百度搜索v-lazy-npm 開啟首頁，然後在windows的cmd裡輸入npm install vue-lazyload --save （下載圖片懶載入的外掛） 2、複製下面程式碼到 main.js中 （注①：將有註釋刪掉的那句刪掉）（注②：粗體的那一句話、loading代表載入中的意

基於Jquery的（可視區域，向上滾動向下滾動兩種）圖片懶載入

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

原生javascript實現分頁效果+搜尋功能

一、概述 首先，我們要明確為何需要分頁技術，主要原因有以下：   1、分頁可以提高客戶體驗度，適當地選擇合適的資料條數，讓頁面顯得更有條理，使得使用者體驗感良好，避免過多資料的冗餘。   2、提高效能的需要。 為何需要搜尋技術，主要原因有以下： 1、搜尋功能，能準確的根據使用

手機端圖片懶載入

圖片懶載入是手機內嵌h5開啟網頁速度的優化方式之一，今天我就接受如何用最少的程式碼解決手機端的圖片懶載入問題 因為公司使用的h5都是vue做的，但是其他框架使用方式是一樣的 當後臺資料相應後，一般我們會在html這麼操作 <div class="image" v-for="item in a

如何結合外掛 vue-lazyload 來簡單實現圖片懶載入？

外掛地址：https://www.npmjs.com/package/vue-lazyload； 一、使用場景： 在專案中有很多條數的資訊，且圖片很多的時候，不需要一次把整個頁面的圖片都載入完，而是在滾動到出現在螢幕才去載入該圖片的時候就可以用這個外掛。 二、簡單使用步驟： 1. 在專案裡面 npm

支援BetterScroll和iScroll滾動外掛的圖片懶載入的外掛

  做H5長頁面，內容都是一個個圖片。優化頁面速度，使用了圖片懶載入外掛。   下面我安利一款，我在網上尋找到這個懶載入外掛zhanyouwei/m-lazy，是支撐BetterScroll和iScroll滾動外掛的。 專案地址：https://github.com/zhanyou

圖片懶載入 滾動載入圖片（懶載入）實現原理

滾動載入圖片（懶載入）實現原理   本文主要通過以下幾方面來說明懶載入技術的原理，個人前端小菜，有錯誤請多多指出 一、什麼是圖片滾動載入？ 　　通俗的講就是：當訪問一個頁面的時候，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑（這樣就

layui圖片懶載入-loading佔位圖

前言     使用layui的圖片懶載入，發現未載入的圖片沒有loading佔位圖，顯示的是裂圖，看著不是很好。找了一些解決方法我統一記錄一下。 layui圖片懶載入使用方法 layui.use(’flow’, function(){ var flow = l

vue中使用圖片懶載入vue-lazyload外掛指南

使用方式 使用vue的 vue-lazyload 外掛 外掛地址: https://www.npmjs.com/package/vue-lazyload Installation 安裝方式 1. np