滚屏到相应位置才加载图片
2012-03-09 10:29
197 查看
一个页面图片太多了就有压力。但如果总是分页,每页鸡碎那么多,用户又会很烦。
可以滚屏到相应位置才加载图片,这样就皆大欢喜了。
原理如下:
1、使用jquery
2、需要动态加载的<img>增加一个属性(自己创建的)data-url=真正图片路径,而将src=一个只有1像素的透明GIF,style设置一个不停地转圈的等待图片作为背景,class="scl"
3、相应的jquery对凡是class="scl"的,当屏幕可见时,就将data-url来替换src,这样就可以实现动态加载。在用户这边看来,拉动屏幕到这些图片,会看见它们由一个不停地转动的图片变为真正想看的图片。
代码如下:
jquery.scrollLoading.js
页面
这里有一个问题,就是有时真正图片的尺寸不一定能事先知道,所以一般不指定 width 和 height。但这里暂代图片只有1像素,不指定足够大的尺寸,根本看不到不停地转圈等待那个效果;但如果指定了,比如width=300px,height=200px,那真正图片出来后,也只有这么大,并且看起来变形。解决办法是,加载前指定width=300px,height=200px,加载完成后,再将这个指定去掉。
所以我们定义了一个CSS class :.wimg{width:300px;height:200px;},加载完成后去掉这个wimg。jquery.scrollLoading.js中有这么一句:
参照文章
jQuery页面滚动图片等元素动态加载实现
可以滚屏到相应位置才加载图片,这样就皆大欢喜了。
原理如下:
1、使用jquery
2、需要动态加载的<img>增加一个属性(自己创建的)data-url=真正图片路径,而将src=一个只有1像素的透明GIF,style设置一个不停地转圈的等待图片作为背景,class="scl"
3、相应的jquery对凡是class="scl"的,当屏幕可见时,就将data-url来替换src,这样就可以实现动态加载。在用户这边看来,拉动屏幕到这些图片,会看见它们由一个不停地转动的图片变为真正想看的图片。
代码如下:
jquery.scrollLoading.js
/*! * jquery.scrollLoading.js * by zhangxinxu http://www.zhangxinxu.com * 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().top; 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);
页面
<style type="text/css"> .scl{background:url(/img/loading.gif) no-repeat center;} .wimg{width:300px;height:200px;} </style>
<script type="text/javascript" src="/js/jquery.scrollLoading.js?ver=120308_3"></script> <script type='text/javascript' src='http://cbjs.baidu.com/js/m.js'></script>
<a href='/show.aspx?id=33210947&i=1' target='_blank'><img class="scl" src='/img/pixel.gif' data-url="Upload/2/PicMiniSize/2012-3-9/201203090246063866.jpg"/></a><br/><a href='/show.aspx?id=33210947&i=1' target='_blank'>成熟女人艳如桃……(第一百零五辑)</a>
<script type="text/javascript"> $(function() { $(".scl").scrollLoading(); }); </script>
这里有一个问题,就是有时真正图片的尺寸不一定能事先知道,所以一般不指定 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页面滚动图片等元素动态加载实现
相关文章推荐
- 滚屏到相应位置才加载图片-优化页面访问速度
- 滚屏到相应位置才加载图片
- 滚屏到相应位置才加载图片-优化页面访问速度
- jQuery根据滚动条位置加载相应的内容
- js实现一个长页面中的图片懒加载即滚动到其位置才加载
- android加载网络图片并缓存,对图片进行点击打开相应链接
- 随滚动条位置动态加载页面图片
- python的N个小功能(连接数据库并下载相应位置的图片)
- jQuery实现根据滚动条位置加载相应内容功能
- lazyload for JQuery 滚屏图片加载技术
- iOS中加载HTML数据,并点击图片或链接进行相应的操作
- 鼠标移动到一个位置弹出相应的一张图片
- Android广告图片轮播控件,支持无限循环和5种主题,可以灵活设置轮播样式、时间、位置、图片加载框架等!
- Android 解决ListView异步加载网络数据(图片文字)出现位置错乱以及优化ListView的加载
- iOS中加载HTML数据,并点击图片或链接进行相应的操作
- 推荐插件:imagesLoaded,监测图片加载情况并提供相应的事件(加载成功/失败)
- 个人笔记:Imageload 不同位置下的图片加载路径方式
- Android广告图片轮播控件,支持无限循环和5种主题,可以灵活设置轮播样式、时间、位置、图片加载框架等!
- UIImageView:可以通过UIImage加载图片赋给UIImageView,加载后你可以指定显示的位置和大小。 1、初始化
- flash加载外部图片并设定位置及大小