最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery/JavaScript 实现的异步加载图片效果
时间：2013-07-17 编辑：简简单单 来源：一聚教程网
在上代码之前先说一下简单的原理，我们知道在 img 标签中的 src 属性是指向图片地址，要实现异步加载，就先暂时不给 src 属性赋值，而是先找个中间变量的属性 data-src，把图片地址写在 data-src 属性里，然后当触发 onclick 事件的时候，把 data-src 的值复制给 src，也就实现了异步加载。
代码时间到，因为无论是 jQuery 还是 JavaScript 的方法，HTML 的结构是相同的，如下：
| 代码如下 | 复制代码 |
加载图片" id="submitBtn" />  |
|
先上 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 插件也并不是很难嘛，哈哈～
| 代码如下 | 复制代码 |
|
|
|
-
下一个： jQuery 滑动门自动滑动实现代码
相关文章
- JavaScript & jQuery完美判断图片是否加载完毕 01-09
- 预加载图片（jquery,javascript)方法 11-14
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31