jQuery滚动动态加载图片

jQuery滚动动态加载图片 一、关于滚动显屏加载 常常会有这样子的页面，很丰富，页面很长，图片较多。比如说淘宝商城页面。页面图片数量多，而且比较大时。要是页面载入就一次性加载完毕,需要用户等半天。所以针对这种情况,目前很流行的做法就是滚动动态加载，显示屏幕之外的图片默认是不加载的，随着页面的滚动，这个要显示图片的区域进入了浏览器可是窗口范围，则触发图片的加载显示。这种做法的好处是，一是页面加载速度快(浏览器转啊转的圈圈或是进度条很快就玩完了)，二是节约了流量，因为不可能每个用户浏览页面时从头滚到尾的。貌似我上面提到的几个站点就是采用的这种做法，例如，我以迅雷不及掩耳的速度从淘宝商城首页截下来的已触发滚动加载但是未加载完毕的图片: 这是提高前端性能，优化页面加载速度很实用的做法。看上去这种技巧有些技术门槛，其实很简单的。我们需要一个滚动事件，然后判断元素是否在浏览器窗口，然后，显示图片(或是其他元素)就可以啦。我在jQuery库下写了个实现此效果的插件，下面就将简单展示讲解此插件的使用以及滚动动态加载的实现。 二、jQuery滚动加载插件scrollLoading 虽然只有几十行代码，但是为了方便使用，我还是将其插件化了。插件名为jquery.scrollLoading.js，您可以狠狠地点击这里下载(右键 – [目标|链接]另存为)，或是点击这里下载mini压缩版的。您可以狠狠地点击这里:jQuery滚动加载图片等demo，如果您的网速是在贫困线上挣扎，可以慢慢拖动滚动条，就可以很清楚的看到滚动加载的效果了;如果您的网速让你引以为豪，哥，你需要很快的拖动滚动条才能瞥见效果。效果类似下面: demo页面中似乎有段破坏和谐的HTML片段，那是动态加载HTML后的效果，也就是说，此scrollLoading不仅可以用来滚动加载图片，Ajax load页面什么的也是可以的。 三、scrollLoading使用 不管怎样，首先调用jQuery库文件，还有jquery.scrollLoading.js，您可以直接在页面的某处添上如下的代码: 01.