jQuery 图片延迟加载的达成
发布时间：2021-11-23 18:06:35 所属栏目：教程 来源：互联网
导读：最近c2c电子商务已经进入优化阶段 ，我负责前台大多数的功能的实现 ，其实商品列表页，由于会显示很多的商品 ，要是一次性都显示出来，会造成服务器很大的压力，此时我们可以考虑当用户滑动滚动条的时候 ，图片显示出现在屏幕范围之内的时候在加载进来，这样
|
最近c2c电子商务已经进入优化阶段 ，我负责前台大多数的功能的实现 ，其实商品列表页，由于会显示很多的商品 ，要是一次性都显示出来，会造成服务器很大的压力，此时我们可以考虑当用户滑动滚动条的时候 ，图片显示出现在屏幕范围之内的时候在加载进来，这样就可以减少服务器一次性过多请求带来的压力了 此时我们用到jquery.js相信大家都知道的 还有一个延迟加载的jquery插件 jquery.scrollLoading.js 下面像大家介绍一下它的用法 ，很简单 下面是jquery.scrollLoading.js的源码： /* * jquery.scrollLoading.js * by 88181 http://www.88181.com * 2010-11-19 v1.0 */ (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.position().top; if (post < 10) post = o.offset().top; posb = post + o.height(); if ((post > st && post < sth) || (posb > st && posb < sth)) { //在浏览器窗口内 if (tag === "img") { //图片，改变src o.attr("src", url); } else if (tag == "iframe") { o.attr("src", url); } else if (tag == "span") { eval(url); } else { o.load(url); } data.obj = null; } } }); return false; }; //事件触发 //加载完毕即执行 loading(); //滚动执行 $(window).bind("scroll", loading); }; })(jQuery); 然后再你页面引用 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.scrollLoading.js"></script> 在加载图片的地方可以这样 <img data-url="http://88181.com/898.jpg.167_167.jpg" class="lm" align="absmiddle" width="167" height="167"/> 然后再加一段js就可以了 $(function () { $(".lm").scrollLoading(); }); 这样就搞定 屏幕中出现这个图片的时候，才会进行加载，是不是很方便， 同事你也可以一次返回一个列表 ，比如你想一行几个图片的在屏幕的时候 ，这样你可以ajax放回一个list <div class="searchdiv" data-url="http://88181.com/xx/imgList.action"> <img src="http://x88181.com/ui-anim_basic_16x16.gif" alt="" /></div> js： $(function () { $(".searchdiv").scrollLoading(); }); 上面代码解释： 页面加载完成前DIV显示loading图标，当该DIV的一部分在浏览器的可视范围内时，开始使用ajax加载data-url属性对应的HTML内容,正确返回后填充到该DIV里 赶快试试吧 很简单的。 现在淘宝或者京东这样的电子商务网站 ，都是这样类似实现的。  （编辑：南通站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
