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 相关文章推荐
MooTools 1.2介绍
Sep 14 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
理解javascript异步编程
Jan 27 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
使用JS动态显示文本
Sep 09 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 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 模拟$_PUT实现代码
2010/03/15 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
PHP自定义多进制的方法
2016/11/03 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
Python实现的Excel文件读写类
2015/07/30 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
python中的yield from语法快速学习
2020/11/06 Python
什么是类的返射机制
2016/02/06 面试题
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
实习医生自我评价
2013/09/22 职场文书
商场端午节活动方案
2014/01/29 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
实习证明格式范文
2015/06/16 职场文书
如何使用python包中的sched事件调度器
2022/04/30 Python