在上代码之前先说一下简单的原理,我们知道在 img 标签中的 src 属性是指向图片地址,要实现异步加载,就先暂时不给 src 属性赋值,而是先找个中间变量的属性 data-src,把图片地址写在 data-src 属性里,然后当触发 onclick 事件的时候,把 data-src 的值复制给 src,也就实现了异步加载。
代码时间到,因为无论是 jQuery 还是 JavaScript 的方法,HTML 的结构是相同的,如下:
代码如下 | 复制代码 |
先上 jQuery 的方法:
代码如下 | 复制代码 |
$(document).ready(function(){ $('#submitBtn').click(function() { var imgSrc = $(this).next().find('.logo').attr('data-src'); $(this).next().find('.logo').attr('src', imgSrc); }); }); |
再比较一下 JavaScript 的方法:
代码如下 | 复制代码 |
window.onload = function(){ |
再来玩一下这个 DEMO,按照这个原理,发现自己写一个 lazyload 的 jQuery 插件也并不是很难嘛,哈哈~
代码如下 | 复制代码 |
|