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 相关文章推荐
jquery.ui.progressbar 中文文档
Nov 26 Javascript
jQuery each()小议
Mar 18 Javascript
UserData用法总结 lanyu出品
Jul 01 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
Nov 06 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
收音机指标测试方法及仪器
2021/03/01 无线电
深入解析PHP的引用计数机制
2013/06/14 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
Python实现线程状态监测简单示例
2018/03/28 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
详解Python字典小结
2018/10/20 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
PyQt QMainWindow的使用示例
2021/03/24 Python
营销人才自我鉴定范文
2013/12/25 职场文书
效能监察建议书
2014/05/19 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
前台接待员岗位职责
2015/04/15 职场文书
开票证明
2015/06/23 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
Java使用HttpClient实现文件下载
2022/08/14 Java/Android