如何制作像这样的“往下拉图片渐影显示效果”

http://www.gpunion.net/thread-2092-1-1.html
大家可以看这个站，另外19楼也有这样的功能，就是一个界面如果图太多太长，那么下面的图不会显示，但等你往下拉时它才会渐渐显示出来，我想这样会加大对页面加载，从而不是像普通的一样一打开就并一个页面上的图片都加载出来。

这样的效果应该能很好的保存速度吧，不知道哪位朋友晓得这功能， 麻烦告知一下，谢谢。

顶顶更健康

腾讯空间的首页也是如此

不知道哦。这种方法冒似很不错。可以增加浏览速度

这种技术 称为《图片延时加载》  效果可以直接看淘宝的商品分类页、还有QQ的商城页

大家如果使用firebug去查看的话就会发现，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，对于比较长的页面来说，这个方案是比较好的。
实现原理
把所有需要延时加载的图片改成如下的格式：

1. <img lazy_src="图片路径" border="0"/>

复制代码

然后在页面加载时，把所有使用了lazy_src的图片都保存到数组里，然后在滚动时计算可视区域的top，然后把延时加载的图片中top小于当前可视区域（即图片出现在可视区域内）的图片的src的值用lazy_src的来替换（加载图片）
代码

1. lazyLoad=(function() {
   
2. var map_element = {};
   
3. var element_obj = [];
   
4. var download_count = 0;
   
5. var last_offset = -1;
   
6. var doc_body;
   
7. var doc_element;
   
8. var lazy_load_tag;
   
9. function initVar(tags) {
   
10. doc_body = document.body;
    
11. doc_element = document.compatMode == 'BackCompat' ? doc_body: document.documentElement;
    
12. lazy_load_tag = tags || ["img", "iframe"];
    
13. };
    
14. function initElementMap() {
    
15. var all_element = [];
    
16. //从所有相关元素中找出需要延时加载的元素
    
17. for (var i = 0,
    
18. len = lazy_load_tag.length; i < len; i++) {
    
19. var el = document.getElementsByTagName(lazy_load_tag[i]);
    
20. for (var j = 0,
    
21. len2 = el.length; j < len2; j++) {
    
22. if (typeof(el[j]) == "object" && el[j].getAttribute("lazy_src")) {
    
23. element_obj.push(all_element[key]);
    
24. }
    
25. }
    
26. }
    
27. 
    
28. for (var i = 0,
    
29. len = element_obj.length; i < len; i++) {
    
30. var o_img = element_obj[i];
    
31. var t_index = getAbsoluteTop(o_img);//得到图片相对document的距上距离
    
32. if (map_element[t_index]) {
    
33. map_element[t_index].push(i);
    
34. } else {
    
35. //按距上距离保存一个队列
    
36. var t_array = [];
    
37. t_array[0] = i;
    
38. map_element[t_index] = t_array;
    
39. download_count++;//需要延时加载的图片数量
    
40. }
    
41. }
    
42. 
    
43. };
    
44. function initDownloadListen() {
    
45. if (!download_count) return;
    
46. var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop: doc_element.scrollTop;
    
47. //可视化区域的offtset=document的高+
    
48. var visio_offset = offset + doc_element.clientHeight;
    
49. if (last_offset == visio_offset) {
    
50. setTimeout(initDownloadListen, 200);
    
51. return;
    
52. }
    
53. last_offset = visio_offset;
    
54. var visio_height = doc_element.clientHeight;
    
55. var img_show_height = visio_height + offset;
    
56. for (var key in map_element) {
    
57. if (img_show_height > key) {
    
58. var t_o = map_element[key];
    
59. var img_vl = t_o.length;
    
60. for (var l = 0; l < img_vl; l++) {
    
61. element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("lazy_src");
    
62. }
    
63. delete map_element[key];
    
64. download_count--;
    
65. }
    
66. }
    
67. setTimeout(initDownloadListen, 200);
    
68. };
    
69. function getAbsoluteTop(element) {
    
70. if (arguments.length != 1 || element == null) {
    
71. return null;
    
72. }
    
73. var offsetTop = element.offsetTop;
    
74. while (element = element.offsetParent) {
    
75. offsetTop += element.offsetTop;
    
76. }
    
77. return offsetTop;
    
78. }
    
79. function init(tags) {
    
80. initVar(tags);
    
81. initElementMap();
    
82. initDownloadListen();
    
83. };
    
84. return {
    
85. init: init
    
86. }
    
87. })();

复制代码

使用方法：把页面上需要延时加载的图片src改成为lazy_src，然后把上面的js放到body最后面，然后调用：lazyLoad.init();
调戏的方法可以使用firebug来查看一时图片是否是延时加载。
另外：
如果你的页面上存在有内容切换的栏目的话，可能在切换时切换的内容里的图片可能会不显示，处理的方法是在内容时单独图片加载处理，如：

1. //切换内容的代码...
   
2. chlid.find("img[init_src]").each(function(){
   
3. $(this).attr("src",$(this).attr("init_src"));
   
4. $(this).removeAttr("init_src");
   
5. 
   
6. });

复制代码

樓上高人

这么复杂。。。

分享互联网地 快乐  

你好，我是这个网站的站长
很高兴你关注我的站点，我的站点用的是图片延迟加载
即图片进入视野才开始显示，我用这个的目的是为了提高访问速度和减小服务器压力
（服务器在美国，访问速度慢）
有兴趣的话，可以联系我
这个控件的js和dx的js有冲突，需要修改才能正常使用

使用用“lazy_src”这种方法，等于是放弃了搜索引擎搜索图片，不建议，可以改用其它的js，不需要修改html也可以实现。