Jquery延迟加载图片

最新推荐文章于 2024-04-24 01:03:46 发布

momo_mutou

最新推荐文章于 2024-04-24 01:03:46 发布

阅读量338

点赞数

分类专栏：莫莫学习

本文链接：https://blog.csdn.net/momo_mutou/article/details/40540619

版权

莫莫学习专栏收录该内容

119 篇文章 1 订阅

订阅专栏

屏幕滚动到那个图片的上边缘，才会触发请求加载时间。这样就很好解决一些当第一屏，我们看不到的而且不用第一次加载的图片，就可以触发加载
节约一次下载的时间
演示地址: http://www.corange.cn/demo/3755/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>延迟加载图片jquery插件</title>
<meta name="generator" content="Mephisto" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img").lazyload({
placeholder : "grey.gif",
effect : "fadeIn"
});
});
</script>
<style type="text/css">
#sidebar {
width: 0px;
}

#content {
width: 770px;
}

</style>

</head>

<body>

<div class="entry">
<img src="../demo1.jpg" width="765" height="574"><br/>
<img src="../demo2.jpg" width="765" height="574"><br/>
<img src="../demo3.jpg" width="765" height="574"><br/>
<img src="../demo4.jpg" width="765" height="574" ><br/>
<img src="../demo5.jpg" width="765" height="574"><br/>
<img src="../demo6.jpg" width="765" height="574" ><br/>
</div>

</body>
</html>
js文件请到演示地址下载

原文地址: http://www.corange.cn/archives/2010/12/3755.html

momo_mutou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery延迟加载图片

屏幕滚动到那个图片的上边缘，才会触发请求加载时间。这样就很好解决一些当第一屏，我们看不到的而且不用第一次加载的图片，就可以触发加载节约一次下载的时间演示地址:http://www.corange.cn/demo/3755/index.html 延迟加载图片jquery插件 $(function() { $("img").l
复制链接

扫一扫

专栏目录