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小tip资料
Nov 23 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
javascript每日必学之循环
Feb 19 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
小程序实现搜索框功能
Mar 26 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 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
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
javascript事件模型代码
2007/07/01 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
python数据结构之图的实现方法
2015/07/08 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
爱心倡议书范文
2014/05/12 职场文书
企业安全生产承诺书
2014/05/22 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
锦旗赠语
2015/06/23 职场文书
Java 超详细讲解hashCode方法
2022/04/07 Java/Android