拍拍网上为什么只有屏幕可视化的区域商品图片才会显示。。怎么实现？
如题，这样应该大大加快网页的加载速度。因为不用一打开页面的时候，就加载所有的图片。只需要加载用户可视化区域的图片，只有当你下拉滚动条的时候，下面的图片才会被加载显示。个人觉得这样非常的好，但是不知道是怎么实现的？所以特向各位大侠请教。。哈哈 --------------------编程问答-------------------- 比如：http://shop.qq.com/sale/casio9Sale.html?PTAG=31130.1.1不管你等多长时间，当你下拉滚动条浏览下面图片的时候，也才是这个时候加载图片。。 --------------------编程问答-------------------- 呃 我一直以为是load的时候自动的……因为很多网站的图片都是下来一点看一点的……MARK等正解 --------------------编程问答-------------------- 懒加载 --------------------编程问答-------------------- http://www.cnblogs.com/ascrat/archive/2010/06/29/1767496.html
哈哈。。多谢楼上的指点。。找了一个解决方案。原来用jquery实现的。。
先撤了。晚上回来再好好研究研究。。 --------------------编程问答-------------------- 这个,在
onscroll事件中,
根据document的scrolltop+clientHight以及图片的offsetTOP来处理.
当scrolltop+clientHight接近图片的offsetTOP时,就加载此图片 --------------------编程问答--------------------
当scrolltop+clientHight接近图片的offsetTOP时,程序如何判定让其加载呢？又如何在onload时不让它加载呢？如果它对每张图片都用程序进行比较的话那不是个可怕的事情，请楼上的帮忙解答一下！我很赞同你的观点，但是不太明白！！谢谢！！ --------------------编程问答-------------------- 局部加载，很多访问量大的网站像淘宝都是这样 --------------------编程问答--------------------
应该是clientHeight
最初并不是不加载,而是每张图都统一加载同一个很小的图标.当然你也可以不设置SRC,这样图片将显示一个红X,不好看. 如果不喜欢每张图都加载一个标准图片,你可以将它们的display设为hidden,当页面滚动时,判断哪些图片应该加载...
譬如
<img src="img/small.gif" real="pic/008.jpg" />
<img src="img/small.gif" real="pic/005.jpg" />
<img src="img/small.gif" real="pic/001.jpg" />
至于程序负担,这只是客户端的javascript,不会影响服务器.
而js对于这种简单的运算,只是小得不能再小的case
假设一页有50张图,javascript的基本逻辑也就是循环50下(事实上不用50下,因为中途会根据条件return了).
for (i in document.body.getElementsByTagName("img"))
{
if () ....
}
或者你在onload时,一次性将页面内所有图片的 id以及对应的offsetHeight数据保存到一josn或数组对象中,下次使用时,直接利用就行了
这只是一个粗糙的思路,实际应用可以优化改进.
--------------------编程问答-------------------- 把IMG都设为空，或者用个很小的图片代替。在scorll事件里用js给IMG赋值这样不就是了。
补充：.NET技术 , ASP.NET
