jquery 异步加载，懒加载图片一种方式

来源：互联网发布：樱井知香和黑人在线av 编辑：程序博客网时间：2024/06/01 10:01

首先将插件在jq后面引入

<span style="font-family:Microsoft YaHei;">(function($) {// alert($.fn.scrollLoading);$.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;posb = post + o.height();if((post > st && post < sth) || (posb > st && posb < sth)) {if(tag === "img") {o.attr("src", url);} else {o.load(url);}data.obj = null;}}});return false;};loading();$(window).bind("scroll", loading);};})(jQuery);</span>

然后在底部初始化

<span style="font-family:Microsoft YaHei;">    $(document).ready(function () {        //实现图片慢慢浮现出来的效果        $("img").load(function () {            //图片默认隐藏              $(this).hide();            //使用fadeIn特效              $(this).fadeIn("5000");        });        // 异步加载图片，实现逐屏加载图片        $(".scrollLoading").scrollLoading();     });</span>

需要修改img标签为

<span style="font-family:Microsoft YaHei;"><img class="scrollLoading" data-url="image/logo.jpg" src="images/load.gif" /></span>

data-url表示将要异步加载的图片，src表示首先加载的图片（一般会是小图片，或者是一个动画，网页中全部的src链接同一个图片，这样网页就加载快好多，这个时候再异步的加载要加载的图片，也就现在要说的功能）

0 0