关注我们
  • QQ:513894357
  • Tel:13065018050

微信公众号

站酷主页

Get content

找寻您想要的最新文章及动态信息

您当前所在位置:首页 > 最新动态&文章 > 最新文章

如何实现网页图片按需滚动分屏无限加载?

所属分类:最新文章更新时间:2015-10-07 12:03:24人气:4893

好多学员都在问怎么实现网页图片的滚动无限加载,鉴于此,小编将为大家分享怎么一步一步来实现网页滚动无限加载:

第一:为什么需要滚动加载网页图片

我们知道当一个网页含有大量图片的时候,往往加载时间都会很慢,这里不考虑服务器多好,网速多块哈。如淘宝京东等大型电商网站。新闻类就是新浪等了。你可以想象一下,如果一下加载整个网页的所有图片,那会是一个缓慢的过程。在现今我们对知识的渴望性的的增加额,总想最快的浏览网页。所以这个时候我们就需要用到滚动时时加载的方法了!




第二:实现图片滚动加载的思路解析

“开始不给它放图片,等滚动到哪里的时候再获取!”但是问题出现了:我们知道如果在 src 中你不放入正确的图片地址。那么有的浏览器就会出现一个小红色的叉叉图标。

(1)所以必须是一个对的url地址。我们就用一张一像素的图片作为初始图片。

(2)在滚动到图片出现在浏览器的可视范围时,在动态替换图片的url地址,这里的动态指的是使用js替换!

如下:


这里的pix.png就是一张一像素的图片!至于 data-url 这是html5的新属性。你只需要知道怎样获得里面的值就对了。方法如下:(这里使用jquery)


解决了这两个问题,那么就简单了,接下来就看怎么实现吧。

第三:实现图片滚动加载重要代码解释:


好了这样基本实现了!