jQuery/JavaScript 实现的异步加载图片效果
在上代码之前先说一下简单的原理，我们知道在 img 标签中的 src 属性是指向图片地址，要实现异步加载，就先暂时不给 src 属性赋值，而是先找个中间变量的属性 data-src，把图片地址写在 data-src 属性里，然后当触发 onclick 事件的时候，把 data-src 的值复制给 src，也就实现了异步加载。
代码时间到，因为无论是 jQuery 还是 JavaScript 的方法，HTML 的结构是相同的，如下：
| 代码如下 |
复制代码 |
<div id="box">
<input type="submit" value="异步加载图片" id="submitBtn" />
<div class="picBox">
<img data-src="logo.png" alt="" class="logo" />
</div>
</div>
|
先上 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(){
document.getElementById('submitBtn').onclick = submitBtn;
}
function submitBtn(){
var imgTag = document.getElementById('box').getElementsByTagName('img');
var imgSrc = imgTag[0].getAttribute('data-src');
imgTag[0].setAttribute('src',imgSrc);
}
|
再来玩一下这个 DEMO，按照这个原理，发现自己写一个 lazyload 的 jQuery 插件也并不是很难嘛，哈哈～
| 代码如下 |
复制代码 |
|
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="jquery.min.1.3.1.js"></script>
<style type="text/css">
.box{
padding:10px;
}
.picBox{
width:265px;
height:137px;
border:1px dashed #999;
}
.picBox img{
width:100%;
height:100%;
display:block;
}
</style>
<title>jQuery/JavaScript 实现的异步加载图片</title>
</head>
<body>
<!-- S jqAjax -->
<div id="jqAjax" class="box">
<input type="submit" value="jQuery 异步加载图片" id="jqAjaxBtn" />
<div class="picBox">
<img data-src="logo.png" src="blank.gif" alt="" class="logo" />
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#jqAjaxBtn').toggle(
function(){
var imgSrc = $(this).next().find('.logo').attr('data-src');
$(this).next().find('.logo').attr('src', imgSrc);
$(this).attr('value','再玩一次 O(∩_∩)O~');
},
function(){
$(this).next().find('.logo').attr('src', 'blank.gif');
$(this).attr('value','jQuery 异步加载图片');
}
);
});
</script>
</div>
<!-- E jqAjax -->
<!-- S jsAjax -->
<div id="jsAjax" class="box">
<input type="submit" value="JavaScript 异步加载图片" id="jsAjaxBtn" />
<div class="picBox">
<img data-src="logo.png" src="blank.gif" alt="" class="logo" />
</div>
<script type="text/javascript">
window.onload = function(){
document.getElementById('jsAjaxBtn').onclick = jsToggle;
}
function jsToggle(){
var jsImgTag = document.getElementById('jsAjax').getElementsByTagName('img')[0];
var jsImgDataSrc = jsImgTag.getAttribute('data-src');
var jsImgSrc = jsImgTag.getAttribute('src',2);
if ( jsImgSrc == 'blank.gif' ){
jsImgTag.setAttribute('src',jsImgDataSrc);
document.getElementById('jsAjaxBtn').setAttribute('value','再玩一次 O(∩_∩)O~');
} else {
jsImgTag.setAttribute('src','blank.gif');
document.getElementById('jsAjaxBtn').setAttribute('value','JavaScript 异步加载图片');
}
}
</script>
</div>
<!-- E jsAjax -->
</body>
</html>
|
补充：网页制作,jquery
