滚屏到相应位置才加载图片

滚屏到相应位置才加载图片

一个页面图片太多了就有压力。但如果总是分页，每页鸡碎那么多，用户又会很烦。

可以滚屏到相应位置才加载图片，这样就皆大欢喜了。

原理如下：

1、使用jquery

2、需要动态加载的增加一个属性（自己创建的）data-url=真正图片路径，而将src=一个只有1像素的透明GIF，style设置一个不停地转圈的等待图片作为背景，class="scl"

3、相应的jquery对凡是class="scl"的，当屏幕可见时，就将data-url来替换src，这样就可以实现动态加载。在用户这边看来，拉动屏幕到这些图片，会看见它们由一个不停地转动的图片变为真正想看的图片。

代码如下：

jquery.scrollLoading.js

/*! * jquery.scrollLoading.js * by zhangxinxu * 2010-11-19 v1.0 * 2012-01-13 v1.1 偏移值计算修改 position → offset*/(function($) { $.fn.scrollLoading = function(options) { var defaults = { attr: "data-url" }; var params = $.extend({}, defaults, options || {}); params.cache = []; $(this).each(function() { var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]); if (!url) { return; } //重组 var data = { obj: $(this), tag: node, url: url }; params.cache.push(data); }); //动态显示数据 var loading = function() { var st = $(window).scrollTop(), sth = st + $(window).height(); $.each(params.cache, function(i, data) { var o = data.obj, tag = data.tag, url = data.url; if (o) { post = o.offset()-; posb = post + o.height(); if ((post > st && post < sth) || (posb > st && posb < sth)) { //在浏览器窗口内 if (tag === "img") { //图片，改变src o.load(function() { o.removeClass("wimg"); }); o.attr("src", url); } else { o.load(url); } data.obj = null; } } }); return false; }; //事件触发 //加载完毕即执行 loading(); //滚动执行 $(window).bind("scroll", loading); };})(jQuery);

页面

这里有一个问题，就是有时真正图片的尺寸不一定能事先知道，所以一般不指定 width 和 height。但这里暂代图片只有1像素，不指定足够大的尺寸，根本看不到不停地转圈等待那个效果；但如果指定了，比如width=300px,height=200px，那真正图片出来后，也只有这么大，并且看起来变形。解决办法是，加载前指定width=300px,height=200px，加载完成后，再将这个指定去掉。

所以我们定义了一个CSS class :.wimg{width:300px;height:200px;}，加载完成后去掉这个wimg。jquery.scrollLoading.js中有这么一句：

//图片，改变src o.load(function() { o.removeClass("wimg"); });

参照文章

​​jQuery页面滚动图片等元素动态加载实现​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。