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 相关文章推荐
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
JS+CSS实现动态时钟
Feb 19 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
Javascript动画的实现原理浅析
2015/03/02 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
师范应届毕业生自荐信
2013/11/18 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
应届毕业生自荐信
2014/05/28 职场文书
护理目标管理责任书
2014/07/25 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
利用Python实现模拟登录知乎
2022/05/25 Python