jQuery实现鼠标滚动图片延迟加载效果附源码下载


Posted in Javascript onJune 28, 2016

这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示。在这之前全部图片都由一张图片代替。节省流量,减轻服务器负担。

请用鼠标或者键盘方向键使页面向下滚动,注意图片的变化。本特效没有使用专门的图片延迟加载插件,只需要一小段jQuery代码就实现了图片延迟加载,使用非常方便。在本文后面附有源码下载。

jQuery实现鼠标滚动图片延迟加载效果附源码下载

jQuery实现鼠标滚动图片延迟加载效果附源码下载

效果展示       源码下载

用到的加载中的图片:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery鼠标滚动页面图片延迟加载_何问起</title><base target="_blank" />
<meta name="description" content="何问起">
<meta name="keywords" content="何问起">
<link href="" rel="stylesheet">
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}
.hovertreebox {
padding-top: 800px;
}
.img_hovertreebox {
float: left;
width: 33%;
text-align: center;
margin-bottom: 100px;
}
.hovertreeinfo{text-align:center;}
.hovertreeinfo a{color:blue;}
</style>
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(event) {
var ah=$(window).scrollTop();
var ch=$(window).height()
$('.img_hovertreebox').each(function(){
var bh=$(this).offset().top;
if(ch+ah-200>bh){
var a=$(this).find('img').attr("load_src");
$(this).find('img').attr("src",a);
}
})
});
})
</script>
</head>
<body>
<div class="hovertreeinfo"><h1>jQuery鼠标滚动页面图片延迟加载</h1>
请向下滚动页面。注意图片的变化。
<a href="http://hovertree.com">何问起</a>
<a href="http://hovertree.com/menu/texiao/">网页特效</a>
<a href="http://hovertree.com/h/bjaf/yanchijaizai.htm">代码说明</a>
</div>
<div class="hovertreebox">
<div class="img_hovertreebox">
<img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img1.png">
</div>
<div class="img_hovertreebox">
<img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img2.png">
</div>
<div class="img_hovertreebox">
<img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img3.png">
</div>
<div class="img_hovertreebox">
<img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img4.png">
</div>
<div class="img_hovertreebox">
<img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img5.png">
</div>
<div class="img_hovertreebox">
<img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img6.png">
</div>
<div class="img_hovertreebox">
<img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img7.png">
</div>
<div class="img_hovertreebox">
<img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img8.png">
</div>
<div class="img_hovertreebox">
<img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img9.png">
</div>
</div>
</body>
</html>

以上所述是小编给大家介绍的jQuery实现图片延迟加载 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 垃圾回收机制分析
Oct 10 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
jqGrid用法汇总(全经典)
Jun 28 #Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 #Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 #Javascript
浅谈js的url解析函数封装
Jun 28 #Javascript
JavaScript中点击事件的写法
Jun 28 #Javascript
js改变style样式和css样式的简单实例
Jun 28 #Javascript
js改变css样式的三种方法推荐
Jun 28 #Javascript
You might like
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
php中神奇的fastcgi_finish_request
2011/05/02 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
快速处理vue渲染前的显示问题
2018/03/05 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
原生JS实现天气预报
2020/06/16 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
python的urllib模块显示下载进度示例
2014/01/17 Python
Python删除空文件和空文件夹的方法
2015/07/14 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
python 5个实用的技巧
2020/09/27 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
几道Web/Ajax的面试题
2016/11/05 面试题
技校毕业生的自我评价
2013/12/27 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
五好家庭申报材料
2014/12/20 职场文书
走进科学观后感
2015/06/18 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
Python自动化测试PO模型封装过程详解
2021/06/22 Python