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

比如淘宝的宝贝详情页面，描术里图片都是要往下拉滚动条，才会加载的，估计这是为了减轻服务器负担才这样设计的。

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

于是我浏览淘宝页面都是先拉到低，等它加载好后再回顶部浏览。但我通常是后台打开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

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

#16

参考 关于图片延迟加载技术-ImageLazyLoad