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 相关文章推荐
jquery获得下拉框值的代码
Aug 13 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
七个很有意思的PHP函数
May 12 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
js实现多个标题吸顶效果
Jan 08 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的五种设计模式
2012/09/05 PHP
php数组去重的函数代码
2013/02/03 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
jquery.validate使用详解
2016/06/02 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
Python中文编码知识点
2019/02/18 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
python print出共轭复数的方法详解
2019/06/25 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
小学生打架检讨书
2014/01/26 职场文书
村庄环境整治方案
2014/05/15 职场文书
学校师德师风整改措施
2014/10/27 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
运动会开幕词
2015/01/28 职场文书
沈阳故宫导游词
2015/01/31 职场文书
学校计划生育责任书
2015/05/09 职场文书
农业项目投资意向书
2015/05/09 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
详解Vue3使用axios的配置教程
2022/04/29 Vue.js