这篇文章主要介绍了 JavaScript 仿淘宝页面图片滚动加载及刷新回顶部的方法解析, 包括懒加载和 onbeforeunload 等要点的理解, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
淘宝图片处理讨论
淘宝网页面很大,但是打开速度很快。其对图片处理是运用了滚动加载,就是滚动轴滚到哪里,图片在哪里加载。但是你想查看他的源代码,那要费九牛二虎之力吧,因为他们代码压缩合并做的很好!因为图片是滚动加载的,初始化的时候图片不加载,那么当你在页面底部刷新页面的时候,底部的页面通常不会加载出来,淘宝网的做法貌似是(因为我没有看他们的源代码,只是凭操作),刷新让页面回到顶部。
模仿淘宝,做滚动图片加载
这里想到了三种方法:
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 就可以了。
这里我就不罗列代码了。
来源: http://www.phperz.com/article/17/0227/265497.html