美文网首页
图片懒加载实现思路

图片懒加载实现思路

作者: working_Poor | 来源:发表于2019-01-10 13:30 被阅读0次

1、 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        html, body, div {
            margin: 0;
            padding: 0;
        }
        img {
            display: block;
            margin-bottom: 50px;
            height: 200px;
        }
    </style>
</head>
<body>
    <img src="images/default.jpg" data-src="images/1.jpg">
    <img src="images/default.jpg" data-src="images/2.jpg">
    <img src="images/default.jpg" data-src="images/3.jpg">
    <img src="images/default.jpg" data-src="images/4.jpg">
    <img src="images/default.jpg" data-src="images/5.jpg">
    <img src="images/default.jpg" data-src="images/6.jpg">
    <img src="images/default.jpg" data-src="images/7.jpg">
    <img src="images/default.jpg" data-src="images/8.jpg">
    <img src="images/default.jpg" data-src="images/9.jpg">
    <img src="images/default.jpg" data-src="images/10.jpg">
    <img src="images/default.jpg" data-src="images/11.jpg">
    <img src="images/default.jpg" data-src="images/12.jpg">
    <img src="images/default.jpg" data-src="images/13.jpg">
    <img src="images/default.jpg" data-src="images/14.jpg">
    <img src="images/default.jpg" data-src="images/15.jpg">
    <img src="images/default.jpg" data-src="images/16.jpg">
    <img src="images/default.jpg" data-src="images/17.jpg">
    <img src="images/default.jpg" data-src="images/18.jpg">
    <img src="images/default.jpg" data-src="images/19.jpg">
    <img src="images/default.jpg" data-src="images/20.jpg">
    <img src="images/default.jpg" data-src="images/21.jpg">
    <img src="images/default.jpg" data-src="images/22.jpg">
    <img src="images/default.jpg" data-src="images/23.jpg">
    <img src="images/default.jpg" data-src="images/24.jpg">
</body>
</html>

2、Js

// 获取元素文档坐标
function _getDocPos(ele) {
    let x = 0,
        y = 0;
    while(ele != null) {
        x += ele.offsetLeft
        y += ele.offsetTop
        ele = ele.offsetParent
    }
    return {x, y}
}

//节流函数
... 参考本博客下面的(throttle && debounce 文章)

//方法一:
function lazyload() {
    var images = document.getElementsByTagName('img');
    var len    = images.length;
    var n      = 0;      //存储图片加载到的位置,避免每次都从第一张图片开始遍历       
    return function() {
        var seeHeight = document.documentElement.clientHeight;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        for(var i = n; i < len; i++) {
            if(_getDocPos(images[i]).y < seeHeight + scrollTop) { //方法二: 当图片的文档坐标小于(视口高度 + 滚动距离) 
                if(images[i].getAttribute('src') === 'images/default.jpg') {
                    images[i].src = images[i].getAttribute('data-src');
                }
                n = n + 1;
            }
        }
    }
}

//方法二:
function lazyload() {
    var images = document.getElementsByTagName('img');
    var len    = images.length;
    var n      = 0;      //存储图片加载到的位置,避免每次都从第一张图片开始遍历       
    return function() {
        var seeHeight = document.documentElement.clientHeight;
        for(var i = n; i < len; i++) {
            if(images[i].getBoundingClientRect().top < seeHeight) { //方法二: 当图片的视口top出现在视口中
                if(images[i].getAttribute('src') === 'images/default.jpg') {
                    images[i].src = images[i].getAttribute('data-src');
                }
                n = n + 1; 
            }
        }
    }
}

//测试
var loadImages = lazyload();
loadImages(); //初始化首页的页面图片
window.addEventListener('scroll', _throttle(loadImages, 1000), false);

3、结尾

本文参考--- 链接

相关文章

  • 图片懒加载的原理

    懒加载思路及实现 实现懒加载有四个步骤,如下:1.加载loading图片2.判断哪些图片要加载【重点】3.隐形加载...

  • 图片懒加载实现思路

    1、 HTML 2、Js 3、结尾 本文参考--- 链接

  • jquery 回到顶部、懒加载、无限加载

    懒加载的实现思路,避免所有图片在网页加载时全部加载而影响网页性能,通过按需加载来实现 【1】图片加载前,目标位置图...

  • 懒加载课堂笔记

    饥人谷_李栋 定义 图片懒加载 阶段实现 如何判断图片在可视范围 代码思路 封装 懒加载抽离 曝光去重 总结 一、...

  • 前端实现图片懒加载思路

    大家都知道,一张图片就是一个 标签,而图片的来源主要是src属性。浏览器是否发起亲求就是根据是否有src属性决定的...

  • 图片懒加载

    前端实现图片懒加载(lazyload)的两种方式 原生JS实现最简单的图片懒加载 30行Javascript代码实...

  • 懒加载和瀑布流

    一、简述图片懒加载的实现原理 图片懒加载 若一开始,页面上有许多的图片要加载,而如果同时加载这么多图片,会消耗性能...

  • 图片的懒加载和预加载

    懒加载:又称延迟加载,需要等到某个情况下才加载,相对可以缓解服务器压力。 实现原理:以懒加载图片为例,当加载图片较...

  • 实现图片懒加载

    项目中遇到一个公示信息列表,其中有图片预览, 因为窗口小、列表长、图片多,加载很慢,于是想把图片做成懒加载模式。 ...

  • 图片懒加载实现

    先将img标签的src链接设为同一张图片(比如空白图片),然后给img标签设置自定义属性(比如 data-src)...

网友评论

      本文标题:图片懒加载实现思路

      本文链接:https://www.haomeiwen.com/subject/vvxarqtx.html