JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析


Posted in Javascript onMay 24, 2016

淘宝图片处理讨论
淘宝网页面很大,但是打开速度很快。其对图片处理是运用了滚动加载,就是滚动轴滚到哪里,图片在哪里加载。但是你想查看他的源代码,那要费九牛二虎之力吧,因为他们代码压缩合并做的很好!因为图片是滚动加载的,初始化的时候图片不加载,那么当你在页面底部刷新页面的时候,底部的页面通常不会加载出来,淘宝网的做法貌似是(因为我没有看他们的源代码,只是凭操作),刷新让页面回到顶部。

模仿淘宝,做滚动图片加载
这里想到了三种方法:
1.javascript懒加载之可视区域加载

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>haorooms前端博客-可视区域加载之 javascript</title>
  <style>
  img{width:100%;margin-bottom: 30px; min-height: 400px; background-color: #ddd;}

  </style>
</head>
<body>
  <img haoroomslazyload="Chrysanthemum.jpg" src="" >
  <img haoroomslazyload="Desert.jpg" src="" >
  <img haoroomslazyload="Hydrangeas.jpg" src="" >
  <img haoroomslazyload="Koala.jpg" src="" >
  <img haoroomslazyload="Lighthouse.jpg" src="" >
  <img haoroomslazyload="Penguins.jpg" src="" >
  <img haoroomslazyload="Tulips.jpg" src="" >
  <script>
  var imgNum=document.getElementsByTagName('img').length;
  var imgObj=document.getElementsByTagName("img");
  var l=0;

    window.onscroll=function(){
        var seeHeight = document.documentElement.clientHeight;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        for(var i=l;i<imgNum;i++){
          if(imgObj[i].offsetTop < seeHeight + scrollTop){
            console.log(imgObj[i].getAttribute("src"));
            console.log(imgObj[i].src );
            if(imgObj[i].getAttribute("src") == ""){
              imgObj[i].src = imgObj[i].getAttribute("haoroomslazyload");
            }
          }
          if(imgObj[i].offsetTop > seeHeight + scrollTop){
            l=i;
            break;
          }
        }
    }

</script>

大家注意看我的两个console输出,console.log(imgObj[i].src );获取的是整个浏览器地址!
2.jquery懒加载之可视区域加载
上面的js用jquery翻译版!

var l=0
//js方法翻译版
$(window).bind("scroll", function(event){

        for(var i=l;i<$("img").length;i++){
          if($("img").eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())){
            if($("img").eq(i).attr("src") == ""){
              var lazyloadsrc=$('img').eq(i).attr("haoroomslazyload");
              $("img").eq(i).attr("src",lazyloadsrc);
            }
          }
          if($("img").eq(i).offset().top > parseInt($(window).height()) + parseInt($(window).scrollTop())){
            l=i;
            break;
          }
        }

 });

3.可视区域加载延伸
例如一个动画效果,或者一个canvas图片,我想达到的效果是,初始进来不加载,当滚动到这个动画或者图表上面的时候,进行加载,那么我们就可以根据上面的代码进行如下改进:

$(window).bind("scroll", function(event){

     //窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度 
      var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop()); 
      var thisTop = parseInt($(window).scrollTop()); //屏幕顶部距离最顶部的高度 
        var PictureTop = parseInt($("你的要滚动加载的ID").offset().top); 
         if (PictureTop >= thisTop && PictureTop <= thisButtomTop) {
         // $("#你的要滚动加载的ID").attr("src", $("#你的要滚动加载的ID").attr("haoroomslazyload")); 

          //此处可以执行你的加载函数,加载函数由原来的document.ready中,移到这里来!



         }
})

刷新回顶部
当我们做了可视区域加载的时候,通常让其刷新回到顶部。像淘宝那样。刷新回顶部。
我不知道淘宝网是如何做的。刷新回顶部,我用到的是onbeforeunload 事件。
onbeforeunload与onunload事件,onunload和onbeforeunload都是在刷新或关闭时调用,可以在< script>脚本中通过window.onunload来指定或者在< body>里指定。区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。
Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。
1.页面加载时只执行onload
2.页面关闭时先执行onbeforeunload,最后onunload
3.页面刷新时先执行onbeforeunload,然后onunload,最后onload。
刷新回顶部就是用这个事件,可以这么写。

window.onbeforeunload  =  function(){$(window).scrollTop(0);}

当网站所有的图片都用了可是区域加载,css和js都合并压缩了,那我们的网站速度和性能会提升很多!
假如你想做成淘宝那样,你可以改进一下代码。
其实延迟加载的思路就是先把图片放在一个data-src或者一个属性中,当页面滑动到可视区域内时,把存起来的图片地址赋值给src就可以了。
这里我就不罗列代码了。

Javascript 相关文章推荐
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 #Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 #Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 #Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 #Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 #Javascript
JavaScript中判断数据类型的方法总结
May 24 #Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 #Javascript
You might like
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
怎么使用pipenv管理你的python项目
2018/03/12 Python
python实现学生信息管理系统
2020/04/05 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
员工生日活动方案
2014/08/24 职场文书
借名购房协议书范本
2014/10/06 职场文书
医院护士工作检讨书
2014/10/26 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
演讲开场白和结束语
2015/05/29 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
Python 数据可视化之Matplotlib详解
2021/11/02 Python
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server