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 相关文章推荐
Cookie 小记
Apr 01 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
javascript 取小数点后几位几种方法总结
Aug 02 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 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
谈谈PHP的输入输出流
2007/02/14 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
简述php环境搭建与配置
2016/12/05 PHP
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
浅谈Python traceback的优雅处理
2018/08/31 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
Python3+Appium安装使用教程
2019/07/05 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
python3中确保枚举值代码分析
2020/12/02 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
电子商务网站的创业计划书
2014/01/05 职场文书
我爱读书演讲稿
2014/05/07 职场文书
个人主要事迹材料
2014/08/26 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
高三语文复习计划
2015/01/19 职场文书
教师个人自我评价
2015/03/04 职场文书
python图像处理 PIL Image操作实例
2022/04/09 Python
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers