专栏首页河湾欢儿的专栏第七节图片延迟加载

第七节图片延迟加载

图片延迟加载/图片懒加载的作用:保证页面打开的速度(3s之后如果首页打不开被称为死亡页面)
原理:
1>对于首屏内容中的图片:首先给对应的区域一张默认图片占着位置(默认图需要非常的小,一般可以维持在5kb以内)
当首屏内容都加载完成后(或者也可以给一个延迟的时间),再开始加载真实的图片
2>对于其它屏中的图片:也是给一张默认的图片占位,当滚动条滚动到对应区域的时候,我们再开始加载真实的图片

网站性能优化的几种方式:
尽量减少向服务器请求的次数(减少http请求)
css/js文件进行合并
icon图片也进行合并--->雪碧图
图片的延迟加载
数据的异步加载
在移动端,如果我做的是一个简单的宣传页,尽量的把css和js写好内嵌式



首屏延迟加载:
如果获取的图片地址是错误的当赋值给img的src属性的时候不仅控制台会报错,而且页面中会出现碎图或叉图,所以我们获取图片的地址之后要验证地址的有效性,是有效的才赋值,不是有效的是不进行赋值处理。

<div class="banner" id="banner">
    <img src="" trueimg="img/jd1.jpg" alt=""/>
</div>

var banner = document.getElementById('banner');
var oimgFir = banner.getElementsByTagName('img')[0];
window.setTimeout(function () {
//创建一个临时的img标签
        var oimg = new Image;
        oimg.src = oimgFir.getAttribute("trueimg");
        //当图片能够正常加载
        oimg.onload = function () {
            oimgFir.src = this.src;
            oimgFir.style.display = 'block';
            oimg = null;
        };
 }, 500);



其他屏单张图片延迟加载
<div class="con" id="con">
    <img src="" trueimg="img/jd2fds.jpg" alt="" class="img2"/>
</div>

    var con = document.getElementById('con');
    var conimgFir = con.getElementsByTagName('img')[0];
    window.onscroll = function () {
      已经加载过了,避免重复加载
        if (con.isLoad) {
            return;
        }
        var scrolltop = (document.documentElement.scrollTop || document.body.scrollTop) + (document.documentElement.clientHeight || document.body.clientHeight);
        var conscrolltop = con.offsetHeight + con.offsetTop;
        if (scrolltop > conscrolltop) {
            console.log('fsd');
            var conimg = new Image;
            conimg.src = conimgFir.getAttribute("trueimg");
            conimg.onload = function () {
                conimgFir.src = this.src;
                conimgFir.style.display = 'block';
                conimg = null;
            };
        不管是否正常加载,只要处理过一次以后都不处理
            con.isLoad = true;
        }
    };


综合练习多张图片延迟加载:
Json文件在json/data.txt
html部分<ul id="news"></ul>
Js部分:
   //    获取数据
    var jsondata = null;
    ~function () {
        var xhr = new XMLHttpRequest();
        xhr.open("get", "json/data.txt", false);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)) {
                jsondata = JSON.parse(xhr.responseText);
            }
        };
        xhr.send();
    }();
    //绑定数据
    ~function () {
        for (var i = 0; i < jsondata.length; i++) {
            var oul = document.getElementById("news");
            var ali = "<li>";
            ali += "<div><img trueImg=" + jsondata[i].imgsrc + "></div>";
            ali += "<div><h2>" + jsondata[i].title + "</h2><p>" + jsondata[i].pre + "</p></div>";
            ali += "</li>";
            oul.innerHTML += ali;
        }
    }();
    //    懒加载
    var ali = document.getElementsByTagName('li');
    var oimg = document.getElementsByTagName('img');

    function lay(cur) {
        if (cur.isload) {
            return;
        }
        var oimgFir = new Image;
        oimgFir.src = cur.getAttribute("trueImg");
        oimgFir.onload = function () {
            cur.src = this.src;
            cur.style.display = 'block';
            oimgFir = null;
        };
        cur.isload = true;
    }


    function handle() {
        for (var i = 0; i < oimg.length; i++) {
            var curImg = oimg[i];
//          当前图片处理过的话就不需要重新进行处理了
            if (curImg.isload) {
                continue;
            }
            var curImgTop = ali[0].offsetHeight + curImg.parentNode.parentNode.offsetTop;
            var scrolltop = (document.documentElement.clientHeight || document.body.clientHeight ) + (document.documentElement.scrollTop || document.body.scrollTop);
            if (scrolltop > curImgTop) {
                lay(curImg);
            }
        }
    }

//  开始的时候过500s加载第一屏
    window.setTimeout(handle, 500);
    window.onscroll=handle;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 《动物魔法学校》儿童学编程Scratch之“外观”部分

    导读:本文通过一个案例《动物魔法学校》来学习Scratch语言的“外观”部分。之后通过一系列其他功能的综合运用对作品功能进行了扩展。

    一石匠人
  • 一张图理清《梅花易数》梗概

    学《易经》的目的不一定是为了卜卦,但是了解卜卦绝对能够让你更好地了解易学。今天用一张思维导图对《梅花易数》的主要内容进行概括,希望能够给学友们提供帮助。

    一石匠人
  • 声音功能让儿童编程更有创造性

    导读:Scratch中声音功能非常强大,除了常规的音效,你甚至可以模拟各种乐器的各个发音、设置节拍、休止……如果你愿意,甚至可以用它创作一个交响乐。我们可以引导...

    一石匠人
  • 我不是算命先生,却对占卜有了疑惑——如何论证“占卜前提”的正确与否

    事出有因,我对《周易》感兴趣了很多年。只是觉得特别有趣,断断续续学习了一些皮毛。这几天又偶然接触到了《梅花易数》,觉得很是精彩,将五行八卦天干地支都串联了起来。...

    一石匠人
  • SQL中GROUP BY用法示例

    GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

    Awesome_Tang
  • 【系统设置】CentOS 修改机器名

    ken.io
  • 什么样的人生才是有意义的人生——没有标准的标准答案

    【导读】其实我们可以跳出这个小圈圈去更加科客观地看一下这个世界。在夜晚的时候我们仰望天空,浩瀚的宇宙中整个地球只是一粒浮尘,何况地球上一个小小的人类?在漫长的历...

    一石匠人
  • 儿童创造力教育与编程教育的碰撞——MIT雷斯尼克教授最新理论梗概

    儿童编程教育已经在我国各一线二线城市疯狂出现,颇有“烂大街”的趋势。我们不禁要问很多很多问题:

    一石匠人
  • 复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

    从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

    haifeiWu
  • 天干地支五行八卦的对应关系

    一石匠人

扫码关注云+社区

领取腾讯云代金券