1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

淘宝网滚动加载图片及刷新回顶部的做法讨论

作者:用户 来源:互联网 时间:2016-11-07 18:26:45

淘宝图片页面淘宝网滚动页面顶部刷新加载顶部淘宝网图片回顶部js回到页面顶部

淘宝网滚动加载图片及刷新回顶部的做法讨论 - 摘要: 本文讲的是淘宝网滚动加载图片及刷新回顶部的做法讨论,  淘宝图片处理讨论   淘宝网页面很大,但是打开速度很快。其对图片处理是运用了滚动加载,就是滚动轴滚到哪里,图片在哪里加载。但是你想查看他的源代码,那要费

 淘宝图片处理讨论

  淘宝网页面很大,但是打开速度很快。其对图片处理是运用了滚动加载,就是滚动轴滚到哪里,图片在哪里加载。但是你想查看他的源代码,那要费九牛二虎之力吧,因为他们代码压缩合并做的很好!因为图片是滚动加载的,初始化的时候图片不加载,那么当你在页面底部刷新页面的时候,底部的页面通常不会加载出来,淘宝网的做法貌似是(因为我没有看他们的源代码,只是凭操作),刷新让页面回到顶部。   模仿淘宝,做滚动图片加载   我不知道淘宝网是如何做滚动加载的,但是我之前有篇文章,介绍了滚动加载,有兴趣的朋友可以去看下:http://www.haorooms.com/post/js_jquery_lazyload_viewload   假如你想做成淘宝那样,你可以改进一下代码。   其实延迟加载的思路就是先把图片放在一个data-src或者一个属性中,当页面滑动到可视区域内时,把存起来的图片地址赋值给src就可以了。   这里我就不罗列代码了。   刷新回顶部   当我们做了可视区域加载的时候,通常让其刷新回到顶部。像淘宝那样。刷新回顶部。   我不知道淘宝网是如何做的。刷新回顶部,我用到的是onbeforeunload 事件。   关于onbeforeunload 事件,http://www.haorooms.com/post/js_close_llq ,这里我也有篇文章专门介绍。大家可以看下。刷新回顶部就是用这个事件,可以这么写。   window.onbeforeunload   =   function(){$(window).scrollTop(0);} 当网站所有的图片都用了可是区域加载,css和js都合并压缩了,那我们的网站速度和性能会提升很多!

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索淘宝 , 图片 , 页面 , 淘宝网 , 滚动 , 页面顶部 , 刷新加载 , 顶部 , 淘宝网图片 , 回顶部 js回到页面顶部 刷新回到滚动条顶部、淘宝网返回顶部代码、滚动条距离顶部的距离、js 滚动到顶部、js滚动条到顶部,以便于您获取更多的相关知识。

jquery lazyload js-jquery lazyload.js插件调用会使滚动条回到顶部的问题

问题描述 jquery lazyload.js插件调用会使滚动条回到顶部的问题 我有一个需求是需要将页面滑到底部的时候会用ajax去服务端请求数据然后动态的加载到页面上,这时候我会去加载一次jquery lazylo...

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

淘宝图片处理讨论淘宝网页面很大,但是打开速度很快。其对图片处理是运用了滚动加载,就是滚动轴滚到哪里,图片在哪里加载。但是你想查看他的源代码,那要费九牛二虎之力吧,因为他们代码压缩合并做的很好!因为图片...

100多个经典常用的PHP功能插件大全实例演示和下载

...代码 js css3镜像文字导航菜单线性动画特效 导航标签跟随滚动到对应文章段落 jQuery手机大众点评下拉菜单选择特效 底部导航菜单【动态波浪效果】 纯html5折叠式导航菜单 jQuery横排下拉导航菜单图片列表显示代码 6款html5手机顶...

大话程序猿眼里的高并发(上)

...量会很大,一页面展示的时候就会有几十件商品的展示,滚动条滚到到页面显示商品的时候就会请求接口进行展示数据的统计,每次翻页又会加载几十件 意淫分析: 设想如果同时有1W个用户同时在线访问页面,一个次拉动滚动...

滚动加载图片(懒加载)实现原理

本文主要根据 一、什么是图片滚动加载。 通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览器的可视区域内时...

前三篇
后三篇