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

17125次浏览

淘宝图片处理讨论

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

模仿淘宝,做滚动图片加载

我不知道淘宝网是如何做滚动加载的,但是我之前有篇文章,介绍了滚动加载,有兴趣的朋友可以去看下: https://www.haorooms.com/post/js_jquery_lazyload_viewload

假如你想做成淘宝那样,你可以改进一下代码。

其实延迟加载的思路就是先把图片放在一个data-src或者一个属性中,当页面滑动到可视区域内时,把存起来的图片地址赋值给src就可以了。

这里我就不罗列代码了。

刷新回顶部

当我们做了可视区域加载的时候,通常让其刷新回到顶部。像淘宝那样。刷新回顶部。

我不知道淘宝网是如何做的。刷新回顶部,我用到的是onbeforeunload 事件。

关于onbeforeunload 事件,https://www.haorooms.com/post/js_close_llq ,这里我也有篇文章专门介绍。大家可以看下。刷新回顶部就是用这个事件,可以这么写。

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

当网站所有的图片都用了可是区域加载,css和js都合并压缩了,那我们的网站速度和性能会提升很多!

假如你知道淘宝网的做法,或者其他更好的做法,欢迎留言交流!

2021年12月补充-history.scrollRestoration

利用这个history.scrollRestoration 可以做到刷新页面回顶部。不用在用上面的方案了。

使用很简单,在页面要刷新回顶部的页面执行下面的js代码就可以了。可以初始化执行,也可以在某个时机下面执行:

if (history.scrollRestoration) {
  history.scrollRestoration = 'manual';
}

history.scrollRestoration 支持下面两个属性值:

auto
默认值,表示滚动位置会被存储。
manual
单词的意思就是手动。表示,滚动的位置不会被存储。

兼容性很不错,现代浏览器很早就支持了,移动端放心使用。目前应该只有ie不支持。

Tags: js延迟加载

相关文章: