js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果


Posted in Javascript onJuly 17, 2017

 本文为大家分享了js实现延迟加载思想和首屏延迟加载的具体代码,供大家参考,具体内容如下

作用:保证页面打开的速度(3s之内如果首页打不开就已经算是死亡页面了)

原理:

1)、对于首屏内容中的图片:首先给对应的区域一张默认图片占的位置(默认图需要非常的小,一般可以维持在5kb以内),当首屏内容都加载完成后(或者也可以给一个延迟的时间),我在开始加载真实的图片

2)、对于其他屏中的图片:也是给一张默认的图片占位,当滚动条滚动到对应区域的时候,我们再开始加载真实的图片

扩展:数据的异步加载,开始只把前两屏的数据加载绑定出来,后面的数据不进行处理,当页面滚动到对应区域的时候,在重新请求数据绑定渲染数据

具体可以看一下下图

js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果

首屏的延迟加载代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      padding:0;
      margin:0;
      font-size:14px;
    }
    #banner{
      margin:10px auto;
      width:300px;
      height:150px;
      border:1px solid green;
      background:url('img/default.gif') no-repeat center center;/*给当前的区域加一个默认图占位,告诉用户此处的图片正在加载中*/
    }
    #banner img{
      display:none;/*在开始的时候IMG的SRC属性没有地址,这样的话在IE浏览器中会显示一张碎图,不美观,所以我们让其默认是隐藏的,当真实的图片加载完成后在显示*/
      width:100%;
      height:100%;
    }
  </style>
</head>
<body>
  <div id='banner'>
    <!--trueImg是当前标签的自定义属性,存储的是真实图片的地址-->
    <img src="" alt="" trueImg="img/jd.jpg">
  </div>
  <script>
    var banner = document.getElementById('banner'),imgFir = banner.getElementsByTagName('img')[0]
    window.setTimeout(function(){
      // imgFir.src = imgFir.getAttribute('trueImg');
      // imgFir.style.display = "block"
      //以上处理还是不完整的:如果我们获取的真实图片的地址是错误的,赋值给IMG的SRC属性的时候,不仅控制台会报错,而且页面中还会出现碎图
      //获取图片的地址,验证地址的有效性,是有效的才赋值,不是有效的是不进行处理的
      // var oImg = document.createElement('img')
      var oImg = new Image;//创建一个临时的IMG标签
      oImg.src = imgFir.getAttribute('trueImg');
      oImg.onload = function(){//当图片能够正常加载
        imgFir.src = this.src;
        imgFir.style.display = "block";
        oImg = null
        console.log('加载完成')
      }
      console.log('正在加载中...')
    },500)
  </script>
</body>
</html>

多屏单张图片的延迟加载

js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      padding:0;
      margin:0;
      font-size:14px;
    }
    #banner{
      margin:10px auto;
      width:300px;
      height:150px;
      border:1px solid green;
      background:url('img/default.gif') no-repeat center center;/*给当前的区域加一个默认图占位,告诉用户此处的图片正在加载中*/
    }
    #banner img{
      display:none;/*在开始的时候IMG的SRC属性没有地址,这样的话在IE浏览器中会显示一张碎图,不美观,所以我们让其默认是隐藏的,当真实的图片加载完成后在显示*/
      width:100%;
      height:100%;
    }
  </style>
</head>
<body>
  <div id='banner'>
    <!--trueImg是当前标签的自定义属性,存储的是真实图片的地址-->
    <img src="" alt="" trueImg="img/jd.jpg">
  </div>
  <script>
    var banner = document.getElementById('banner'),imgFir = banner.getElementsByTagName('img')[0]

    window.onscroll = function(){
      if(banner.isLoad){
        return;
      }
      var A = banner.offsetHeight+utils.offset(banner).top;
      var B = utils.win("clientHeight") + utils.win("scrollTop");
      if(A<B){
        //当条件成立,我们加载真实的图片,第一次加载完成后,我们在让页面滚动的过程中A<B一直成立,又重新执行下面的操作,导致了重复给一个容器中的图片进行加载
        var oImg = new Image;
        oImg.src = imgFir.getAttribute('trueImg');
        oImg.onload = function(){
          imgFir.src = this.src;
          imgFir.style.display = 'block';
          oImg = null;
          
        }
        banner.isLoad = true;//设置一个自定义属性告诉浏览器我已经把图片加载完了(不管是否正常的加载,只要处理过一次以后都不需要处理了)

      }
    }
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
Javascript玩转继承(三)
May 08 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
node.js中grunt和gulp的区别详解
Jul 17 #Javascript
js实现多张图片延迟加载效果
Jul 17 #Javascript
js指定步长实现单方向匀速运动
Jul 17 #Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 #Javascript
javascript 跨域问题以及解决办法
Jul 17 #Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 #Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 #Javascript
You might like
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
Python下载网络小说实例代码
2018/02/03 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
Python内置类型性能分析过程实例
2020/01/29 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
企业门卫岗位职责
2013/12/12 职场文书
犯错检讨书
2014/02/21 职场文书
教师党员一句话承诺
2014/03/28 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
先进典型发言材料
2014/12/30 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
职工食堂管理制度
2015/08/06 职场文书
深入详解JS函数的柯里化
2021/06/09 Javascript
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
Python 阶乘详解
2021/10/05 Python