【JQuery】动态加载的图片如何实现LazyLoad

来源：互联网发布：centos jdk rpm 编辑：程序博客网时间：2024/04/30 09:58

JQuery.lazyload.js是个专门用来做图片延迟加载的插件，当然网上有对它吐槽的，有各种不屑的，他们那是前端大牛，我等只能用用大牛提供插件的可没那能耐，碰巧有人在论坛问动态加载的图片怎么应用lazyload效果，其实我会说在此之前我从来没用过这个插件么……

通过nuget下载lazyload.js，然后搜索该插件的用法，其实网上中文的用法说明都千篇一律，可我需要了解的东西也都知道了，再看下js源代码，参数就一个options，其默认的参数设置如下，各个参数的作用按照英文也大致能猜测出来，下面的备注是我大致对着源代码猜测的，不对你来咬我

var settings = {    threshold: 0,    failure_limit: 0,//失败次数限制    event: "scroll",//通过何种事件来加载图片    effect: "show",//通过哪种JQuery的显示方法来显示图片    container: window,//容器    data_attribute: "original",//要加载的图片是哪种data-后缀    skip_invisible: true,//如果设置为true，则隐藏要显示的实际图片不会被加载    appear: null,//如果设置了的话，将会触发一个只执行一次的方法，参数为self, elements_left, settings    load: null//如果设置了的话，在图片加载时，将执行该方法，参数为self, elements_left, settings};

lazyload插件的其它js也就不多说了，感兴趣的自己会去研究，不敢兴趣的也不想再看，毕竟只有上面的参数是影响使用的，下面开始编写动态加载图片的js

首先是从网上下载各种美图，当然品味独特的可以下载其它图片，但有一点，下载的图片一定不能太少，反正我是下了17张图片

下来就是创建个空的html页面，我们的目的是实现功能，美化自然由图片来提供，样式什么的直接忽略，添加必须的jquery.js和jquery.lazyload.js，在body里面放入一个按钮以及一个用来放图片的容器

<body>    <input type="button" id="bt_Load" value="Get" />    <div id="dv_container"></div></body>

然后下面开始写js代码，哦对了，除了做demo的图片，还需要一张加载效果gif图片，用做默认显示的图片，网上随便找一个即是

$().ready(function () {    var maxPic = 17;//总共17张图片    var perCall = 10;//每次点击加载的图片张数    var nowPicIndex = 1;//当前应当加载的是第几张    var loadingUrl = "/loading.gif";    $('#bt_Load').click(function () {        for (i = 0; i < perCall; i++) {            if (nowPicIndex <= maxPic) {//保证不会超出总图数                var $img = $('<img src="' + loadingUrl + '"/>');//默认显示gif图片，这里千万不能设置实际图片，否则网页一打开浏览器就开始请求实际图片了                $img.attr("data-original", "/tmpPic/" + nowPicIndex + ".jpg");//设置data-original为实际要显示的图片，这里直接用数字来进行编号，方便测试                nowPicIndex++;                $('#dv_container').append($img);                $img.lazyload({                    threshold: 600,                    event: 'scroll mouseover',//注意到这里了吗，这里注册了两个事件，但如果你需要保证scroll效果，那么scroll必须写在第一个，除非你想改lazyload源码                    placeholder: loadingUrl,                    effect: "fadeIn"//显示图片效果为渐入                });            }            else {                break;            }        }    });});

这样动态图片延迟加载的效果就实现了，试验下

艾玛，怎么都是一群小鸟，我的美图呢，这不是我想要的效果，lazyload你居然没考虑图片有可能会出现在已显示区域么？鼠标在小鸟上划过，好，图片出来了，但不开心，我希望是图片一加载，如果是在可见区域，实际图片就立刻加载出来，看样子我们必须还得对源代码动下手，找到如下代码，直接将只有在window加载的时候才执行update方法改成只要lazyload了，最后必定强制执行一次update方法

/* Force initial check if images should appear. *///$(window).load(function() {    update();//只有这段不注销//});

这时候刷新下页面

好吧，美图立刻就出来了，这里我们用调试器看下都加载了什么，可以看到除了loading.gif外，还加载了编号1~5的图片，是不是代码有问题，为什么加载了这么多图片呢，下来再看看这时候的html是什么样子的

看样子没错，还有5张图片没被加载，这时候再点击一下按钮，将剩余的七张图片也都加载出来

同前面一样，实际图片没被加载，我们这时候将滚动条往下拉看看会怎么样

可以看到随着滚动条的滚动，后面刚刚被添加进来的图片也陆续显示出来了，最后再来看看这时候的html是什么样子的

看起来效果完全正确，但事实真是这样吗？

好吧，事实目前来讲还真就是这样，只是不完美而已，因为这居然有浏览器兼容性问题，在IE和FireFox都没问题的lazyload效果，在Chrome下居然偶尔会在当前已加载区域显示没修改过js源代码的小鸡，这也是醉了，但我不想再弄了，反正出现概率也很低，初始化代码里面又加上了mouseover双保险，要实现的效果就算完成了吧

需要源代码可在这里下载

最后有兴趣的同学可以试验下将参数中的event: 'scroll mouseover'修改为event: 'load'，会发生很有意思的事情，可以思考下为什么会这样

0 0