jQuery用lazyload实现图片延迟加载,为什么图片全部都加载了?

Conquer0101 发布于 2014/12/10 11:08
阅读 4K+
收藏 1
jQuery用lazyload实现图片延迟加载,为什么一进去图片就全部加载了,没有在滚动的时候才加载图片?我需要的是滚动的时候才去加载图片呀?
加载中
0
进击的程序员
进击的程序员
一定是姿势不对。
0
Conquer0101
Conquer0101

引用来自“进击的程序员-我爱草莓小姐的莓”的评论

一定是姿势不对。
您好,能具体说一下嘛,我没有看懂耶。
进击的程序员
进击的程序员
...我是说你应该是没操作正确。
0
Raphael_goh
Raphael_goh
<img class="lazy" data-original="img/example.jpg" width="765" height="574" src="1.gif">

感觉是没用对方法,你不会是直接绑定在src上了吧。先用一张透明的gif代替真正目标,将目标地址绑定在 data-original属性上就好了。

参考:https://github.com/tuupola/jquery_lazyload

0
Conquer0101
Conquer0101

引用来自“进击的程序员-我爱草莓小姐的莓”的评论

一定是姿势不对。

引用来自“Conquer0101”的评论

您好,能具体说一下嘛,我没有看懂耶。

麻烦你帮我看一看代码呢,后面的图片。<img class="feature-image img-responsive img-rounded lazy" style="width:150px;height:110px;" src="<%=path%>/images/1.jpg"  data-original="<%=md.getImg()%>">

0
Conquer0101
Conquer0101

引用来自“Raphael_goh”的评论

<img class="lazy" data-original="img/example.jpg" width="765" height="574" src="1.gif">

感觉是没用对方法,你不会是直接绑定在src上了吧。先用一张透明的gif代替真正目标,将目标地址绑定在 data-original属性上就好了

参考:https://github.com/tuupola/jquery_lazyload

我是这样的呀, <img class="feature-image img-responsive img-rounded lazy" style="width:150px;height:110px;" src="<%=path%>/images/1.jpg"  data-original="<%=md.getImg()%>">
Raphael_goh
Raphael_goh
那我就不知道了,应该最多就显示滚动条所在位置的图片吧,不应该会全部显示的。
0
Conquer0101
Conquer0101

引用来自“Conquer0101”的评论

引用来自“Raphael_goh”的评论

<img class="lazy" data-original="img/example.jpg" width="765" height="574" src="1.gif">

感觉是没用对方法,你不会是直接绑定在src上了吧。先用一张透明的gif代替真正目标,将目标地址绑定在 data-original属性上就好了

参考:https://github.com/tuupola/jquery_lazyload

我是这样的呀, <img class="feature-image img-responsive img-rounded lazy" style="width:150px;height:110px;" src="<%=path%>/images/1.jpg"  data-original="<%=md.getImg()%>">
显示图片是正常的,滚动的时候才显示图片,不过应该是显示的时候才去加载图片撒,我这个一开始都把所有的图片加载了。
0
不知谁的风_
不知谁的风_

引用来自“Conquer0101”的评论

引用来自“Raphael_goh”的评论

<img class="lazy" data-original="img/example.jpg" width="765" height="574" src="1.gif">

感觉是没用对方法,你不会是直接绑定在src上了吧。先用一张透明的gif代替真正目标,将目标地址绑定在 data-original属性上就好了

参考:https://github.com/tuupola/jquery_lazyload

我是这样的呀, <img class="feature-image img-responsive img-rounded lazy" style="width:150px;height:110px;" src="<%=path%>/images/1.jpg"  data-original="<%=md.getImg()%>">

引用来自“Conquer0101”的评论

显示图片是正常的,滚动的时候才显示图片,不过应该是显示的时候才去加载图片撒,我这个一开始都把所有的图片加载了。
你对lazyload概念理解的不对,它本来就是指一次全部加载,跟我们不用lazyload,正常获取是一样的。只不过用了lazyload,可以让浏览器在解释HTML的时候,节省时间,因为毕竟一次性加载那么多图片(很多在需要滚动才能看到,没必要第一时间显示出来)是很大的,但是用1.jpg去替换,就很小了,然后在你滚动可见的时候,在替换掉,可以提升你网页的性能。这个跟SQL的lazy是不一样的,sql的lazy可以做到调用的时候在去查询,不调用就不必查询了,概念不一样。
0
Conquer0101
Conquer0101

引用来自“Conquer0101”的评论

引用来自“Raphael_goh”的评论

<img class="lazy" data-original="img/example.jpg" width="765" height="574" src="1.gif">

感觉是没用对方法,你不会是直接绑定在src上了吧。先用一张透明的gif代替真正目标,将目标地址绑定在 data-original属性上就好了

参考:https://github.com/tuupola/jquery_lazyload

我是这样的呀, <img class="feature-image img-responsive img-rounded lazy" style="width:150px;height:110px;" src="<%=path%>/images/1.jpg"  data-original="<%=md.getImg()%>">

引用来自“Conquer0101”的评论

显示图片是正常的,滚动的时候才显示图片,不过应该是显示的时候才去加载图片撒,我这个一开始都把所有的图片加载了。

引用来自“WY_”的评论

你对lazyload概念理解的不对,它本来就是指一次全部加载,跟我们不用lazyload,正常获取是一样的。只不过用了lazyload,可以让浏览器在解释HTML的时候,节省时间,因为毕竟一次性加载那么多图片(很多在需要滚动才能看到,没必要第一时间显示出来)是很大的,但是用1.jpg去替换,就很小了,然后在你滚动可见的时候,在替换掉,可以提升你网页的性能。这个跟SQL的lazy是不一样的,sql的lazy可以做到调用的时候在去查询,不调用就不必查询了,概念不一样。
我的理解是lazyload加载的时候应该加载的是1.jpg这一张图片撒,滚动的时候才会去替换成需要展示的图片。
0
进击的程序员
进击的程序员
楼主想要的应该是瀑布流效果,不是延迟加载。
0
Conquer0101
Conquer0101

引用来自“进击的程序员-我爱草莓小姐的莓”的评论

楼主想要的应该是瀑布流效果,不是延迟加载。
需要延迟加载,图片多了会卡,我都设置一个预加载图片撒,滚动的时候在更换需要展示的图片。
进击的程序员
进击的程序员
http://www.5icool.org/demo/2014/a01234/ 你想要的是不是这个效果
返回顶部
顶部