网页要往下拉下面的图片才加载是如何实现的?

时间:2022-07-04 20:24:35
比如淘宝的宝贝详情页面,描术里图片都是要往下拉滚动条,才会加载的,估计这是为了减轻服务器负担才这样设计的。

但我作为使用者,认为这是一个非常不人性化的设计,打开页面都半天了,往下一看,一大堆图片才开始缓缓加载,又要等上个半天。

于是我浏览淘宝页面都是先拉到低,等它加载好后再回顶部浏览。但我通常是后台打开N个页面再一个个浏览的,这样每个页面都要往下拉一拉,很麻烦,不知Chrome有没办法能破它!求大神支招,谢谢了~

16 个解决方案

#1


该回复于2012-10-22 08:47:02被版主删除

#2


这个给浏览器没关吧??要是不想拉鼠标  end一下也可以啊  

#3


lazyload
用一张默认的图片替换原来的图片地址,原来的图片地址保存到一个自定义属性里面,然后通过滚动判断图片是否出现在当前屏,是就加载这张图片

#4


引用 3 楼  的回复:
lazyload
用一张默认的图片替换原来的图片地址,原来的图片地址保存到一个自定义属性里面,然后通过滚动判断图片是否出现在当前屏,是就加载这张图片


++
另PS下:这不是一个非常不人性化的设计。你从大访问量,从用户角度去看。它可以通过这种方法去减少首次加载的时间,让界面更快的呈现出来。再一个,页面如果长点的话,也有可能下面很多的图片没人看。从按需索取的角度来看,不要的东西就不必加载出来浪费时间了

#5


引用 4 楼  的回复:
引用 3 楼 的回复:
lazyload
用一张默认的图片替换原来的图片地址,原来的图片地址保存到一个自定义属性里面,然后通过滚动判断图片是否出现在当前屏,是就加载这张图片


++
另PS下:这不是一个非常不人性化的设计。你从大访问量,从用户角度去看。它可以通过这种方法去减少首次加载的时间,让界面更快的呈现出来。再一个,页面如果长点的话,也有可能下面很多的图片没人看。从按需索取的角度……

++
一次给你显示完,你又觉得打开页面太慢了,这网站访问速度真垃圾,所以开发者真难办呢

#6


引用 2 楼  的回复:
这个给浏览器没关吧??要是不想拉鼠标  end一下也可以啊


以前我就是猛地按End,但现在不行了,直接拉到底图片也不会加载,非要拉到图片的位置才肯加载,这不很可恶吗

#7


采用的技术和提供的功能,必然是考虑到大多数的用户反馈.
只能说你是个特例.正因如此,你再提的这个需求,也难以让人有动力去做,谁都想获得满足大多数人需求的成就感.

#8


引用 5 楼  的回复:
++
另PS下:这不是一个非常不人性化的设计。你从大访问量,从用户角度去看。它可以通过这种方法去减少首次加载的时间,让界面更快的呈现出来。再一个,页面如果长点的话,也有可能下面很多……


那也照顾一下我这样的特殊用户啊,比如可以自主选择加载方式什么。我不怎么讨厌页面打开太慢,因为我都一下打开3~20多个网页,比如上论坛先看标题,打开一大堆帖子,看完一个关一个,除了头一两个,后面的再慢也加载好了,而且我会先选择已加载好了的页面去浏览,速度慢的先放一边。

再说了这种拉下才加载的设计对一般用户(单页面浏览者)也是很不爽的,至少也要预读一部分,像微博那样子,图片太多的就先显示前面几张,不一下子同时加载,要是这样设计我还能接受,但是淘宝宝贝描述页的图片,不往下拉它就一张都不肯显示,超级讨厌的。

其实我是想来打听下这个lazyload什么的原理,然后看看能不能弄个脚本让页面一打开就强制全部加载。

#9


lazyload:延迟加载,按需获取

#10


引用 9 楼  的回复:
lazyload:延迟加载,按需获取


延迟加载应该叫DelayLoad吧,可是这个是看到哪里加载哪里,没看到的也不会给预读。

像这个,左边是页面已经打开几十秒后截图的图,不往下面看,它就一直在那里转,永不加载,拉到下面去才开始
显示图片,这时滚动条会越来越短,还会往上跳移,对于我这样不习惯用鼠标论滚的用户又是一个不好的体验。
网页要往下拉下面的图片才加载是如何实现的?

#11


引用 4 楼  的回复:
++
另PS下:这不是一个非常不人性化的设计。你从大访问量,从用户角度去看。它可以通过这种方法去减少首次加载的时间,让界面更快的呈现出来。再一个,页面如果长点的话,也有可能下面很多的图片没人看。从按需索取的……


我偏向于物尽其用,而不是节约资源,如果浏览网页时,流量监控显示500KB/S以上我会很高兴的(6M宽带)。

回五楼“一次给你显示完,你又觉得打开页面太慢了”这个快慢的瓶颈主要在用户的网速和机器性能上,如果这两个不好就不要一次打开太多网页的,单页面浏览再慢也不会比延时加载慢。

#12


这个lazyload是用JS实现的吧,谢谢大家了。

#13


举个最简单的例子,3个人来访问,你是其中一个。另2个只有2M带宽。你说你6M带宽,我肯定 偏重于考虑那2个人的需求和体验。你说不你考虑节约资源,但我服务器要考虑,你要是觉得这样子使用让你很烦恼,那说明一个问题:你的网速还不够快,如果你的网速再快一点。给你100M带宽,你滚动到哪里哪里就是显示好的,甚至你完全感觉不到它之前没加载

我要是一个页面十几M的图片资源,2M带宽的人来访问,怎么办呢?N大访问量时怎么办呢?

UE嘛永远是以大多数人的需求为参照的。或者以最差的环境去考虑。以使其在所有用户间得到一个相对好的结果。

#14


我没有指望能左右开发者的思想思想啦,也没说延时加载不好,像新浪微博和QQ空间之类的做得就相当好,它们是先显示头一部分,当用户快浏览完的时候马上加载下一部分。但我说的不好体验仅仅是针对淘宝页面,他不肯预读,非要看哪才加载哪,这对于带宽小的用户来说更是漫长的等待。

我发这个帖子的初衷是了解延时加载的原理,然后开发一个程序或Chrome插件实时监控是否在浏览淘宝页面,如果有就模拟去触发加载事件,以适应我个人的使用习惯。当然,如果淘宝开发人员能改下网页,改成提前预读一部分图片那就最好不过了。

#15


这是为了大部分人浏览起来方便一点,应为很多人可能随意的点或者

#1


该回复于2012-10-22 08:47:02被版主删除

#2


这个给浏览器没关吧??要是不想拉鼠标  end一下也可以啊  

#3


lazyload
用一张默认的图片替换原来的图片地址,原来的图片地址保存到一个自定义属性里面,然后通过滚动判断图片是否出现在当前屏,是就加载这张图片

#4


引用 3 楼  的回复:
lazyload
用一张默认的图片替换原来的图片地址,原来的图片地址保存到一个自定义属性里面,然后通过滚动判断图片是否出现在当前屏,是就加载这张图片


++
另PS下:这不是一个非常不人性化的设计。你从大访问量,从用户角度去看。它可以通过这种方法去减少首次加载的时间,让界面更快的呈现出来。再一个,页面如果长点的话,也有可能下面很多的图片没人看。从按需索取的角度来看,不要的东西就不必加载出来浪费时间了

#5


引用 4 楼  的回复:
引用 3 楼 的回复:
lazyload
用一张默认的图片替换原来的图片地址,原来的图片地址保存到一个自定义属性里面,然后通过滚动判断图片是否出现在当前屏,是就加载这张图片


++
另PS下:这不是一个非常不人性化的设计。你从大访问量,从用户角度去看。它可以通过这种方法去减少首次加载的时间,让界面更快的呈现出来。再一个,页面如果长点的话,也有可能下面很多的图片没人看。从按需索取的角度……

++
一次给你显示完,你又觉得打开页面太慢了,这网站访问速度真垃圾,所以开发者真难办呢

#6


引用 2 楼  的回复:
这个给浏览器没关吧??要是不想拉鼠标  end一下也可以啊


以前我就是猛地按End,但现在不行了,直接拉到底图片也不会加载,非要拉到图片的位置才肯加载,这不很可恶吗

#7


采用的技术和提供的功能,必然是考虑到大多数的用户反馈.
只能说你是个特例.正因如此,你再提的这个需求,也难以让人有动力去做,谁都想获得满足大多数人需求的成就感.

#8


引用 5 楼  的回复:
++
另PS下:这不是一个非常不人性化的设计。你从大访问量,从用户角度去看。它可以通过这种方法去减少首次加载的时间,让界面更快的呈现出来。再一个,页面如果长点的话,也有可能下面很多……


那也照顾一下我这样的特殊用户啊,比如可以自主选择加载方式什么。我不怎么讨厌页面打开太慢,因为我都一下打开3~20多个网页,比如上论坛先看标题,打开一大堆帖子,看完一个关一个,除了头一两个,后面的再慢也加载好了,而且我会先选择已加载好了的页面去浏览,速度慢的先放一边。

再说了这种拉下才加载的设计对一般用户(单页面浏览者)也是很不爽的,至少也要预读一部分,像微博那样子,图片太多的就先显示前面几张,不一下子同时加载,要是这样设计我还能接受,但是淘宝宝贝描述页的图片,不往下拉它就一张都不肯显示,超级讨厌的。

其实我是想来打听下这个lazyload什么的原理,然后看看能不能弄个脚本让页面一打开就强制全部加载。

#9


lazyload:延迟加载,按需获取

#10


引用 9 楼  的回复:
lazyload:延迟加载,按需获取


延迟加载应该叫DelayLoad吧,可是这个是看到哪里加载哪里,没看到的也不会给预读。

像这个,左边是页面已经打开几十秒后截图的图,不往下面看,它就一直在那里转,永不加载,拉到下面去才开始
显示图片,这时滚动条会越来越短,还会往上跳移,对于我这样不习惯用鼠标论滚的用户又是一个不好的体验。
网页要往下拉下面的图片才加载是如何实现的?

#11


引用 4 楼  的回复:
++
另PS下:这不是一个非常不人性化的设计。你从大访问量,从用户角度去看。它可以通过这种方法去减少首次加载的时间,让界面更快的呈现出来。再一个,页面如果长点的话,也有可能下面很多的图片没人看。从按需索取的……


我偏向于物尽其用,而不是节约资源,如果浏览网页时,流量监控显示500KB/S以上我会很高兴的(6M宽带)。

回五楼“一次给你显示完,你又觉得打开页面太慢了”这个快慢的瓶颈主要在用户的网速和机器性能上,如果这两个不好就不要一次打开太多网页的,单页面浏览再慢也不会比延时加载慢。

#12


这个lazyload是用JS实现的吧,谢谢大家了。

#13


举个最简单的例子,3个人来访问,你是其中一个。另2个只有2M带宽。你说你6M带宽,我肯定 偏重于考虑那2个人的需求和体验。你说不你考虑节约资源,但我服务器要考虑,你要是觉得这样子使用让你很烦恼,那说明一个问题:你的网速还不够快,如果你的网速再快一点。给你100M带宽,你滚动到哪里哪里就是显示好的,甚至你完全感觉不到它之前没加载

我要是一个页面十几M的图片资源,2M带宽的人来访问,怎么办呢?N大访问量时怎么办呢?

UE嘛永远是以大多数人的需求为参照的。或者以最差的环境去考虑。以使其在所有用户间得到一个相对好的结果。

#14


我没有指望能左右开发者的思想思想啦,也没说延时加载不好,像新浪微博和QQ空间之类的做得就相当好,它们是先显示头一部分,当用户快浏览完的时候马上加载下一部分。但我说的不好体验仅仅是针对淘宝页面,他不肯预读,非要看哪才加载哪,这对于带宽小的用户来说更是漫长的等待。

我发这个帖子的初衷是了解延时加载的原理,然后开发一个程序或Chrome插件实时监控是否在浏览淘宝页面,如果有就模拟去触发加载事件,以适应我个人的使用习惯。当然,如果淘宝开发人员能改下网页,改成提前预读一部分图片那就最好不过了。

#15


这是为了大部分人浏览起来方便一点,应为很多人可能随意的点或者

#16