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,超强推荐expand.js
Dec 23 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
Aug 02 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
jQuery实现简单隔行变色的方法
Feb 20 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
微信小程序实现文字跑马灯
May 26 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
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
php递归创建目录的方法
2015/02/02 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
Opacity.js
2007/01/22 Javascript
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
什么是数据抽象
2016/11/26 面试题
俄语专业毕业生推荐信
2013/10/28 职场文书
教师个人学习总结
2015/02/11 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
公司员工管理制度
2015/08/04 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
mysql序号rownum行号实现方式
2022/12/24 MySQL