脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery 延迟加载

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

 更新时间：2016年06月28日 14:33:34   作者：roucheng  
本文给大家分享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实现图片延迟加载 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)

    利用jQuery简单实现产品展示图片左右滚动功能(示例代码)

    本篇文章主要是对利用jQuery简单实现产品展示图片左右滚动功能的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • JQuery操作单选按钮以及复选按钮示例

    JQuery操作单选按钮以及复选按钮示例

    单选按钮以及复选按钮的使用情况还是蛮多的，接下来为大家介绍下通过JQuery操作单选按钮和复选按钮，希望对大家有所帮助
    2013-09-09
  • Jquery滑动门/tab切换实现方法完整示例

    Jquery滑动门/tab切换实现方法完整示例

    这篇文章主要介绍了Jquery滑动门/tab切换实现方法,结合完整实例形式分析了Jquery滑动门/tab切换具体操作技巧与页面元素动态操作实现方法,需要的朋友可以参考下
    2020-06-06
  • jQuery实现的类flash菜单效果代码

    jQuery实现的类flash菜单效果代码

    这里要说的就是一个菜单的hover的效果，一般我们通过CSS的伪类:hover实现的菜单切换都比较单调，因为仅仅是一个简单的图片的变化，不像很多flash菜单一样变化非常的平滑，但是这里我们就是要用非flash的技术实现一个平滑的hover效果。
    2010-05-05
  • 解决jQuery动态获取手机屏幕高和宽的问题

    解决jQuery动态获取手机屏幕高和宽的问题

    这篇文章主要介绍了如何解决jQuery动态获取手机屏幕高和宽的问题,需要的朋友可以参考下
    2014-05-05
  • 使用jquery自定义鼠标样式满足个性需求

    使用jquery自定义鼠标样式满足个性需求

    浏览器是有自带的鼠标样式的，如果某些时候为了保持鼠标样式的统一，或者想指定特定的鼠标样式该怎么办呢？那就要使用自定义了，下面有个不错的示例，喜欢的朋友可以参考下
    2013-11-11
  • jquery点击实现升序降序图标切换

    jquery点击实现升序降序图标切换

    这篇文章主要为大家详细介绍了jquery点击实现升序降序图标切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • jQuery 拖动层(在可视区域范围内)

    jQuery 拖动层(在可视区域范围内)

    获取层元素，在浏览器可视区域的最左、最边，最上、最下的值。并且在拖动层的过程中，把当前层的坐标值，去和这几个值，做比较，如果超过这些值。那么就不能再拖动这个方向，即把值设为最小或最大
    2012-05-05
  • jquery实现滑动特效代码

    jquery实现滑动特效代码

    这篇文章主要介绍了jquery实现滑动特效代码， .slideUp([duration][,complete])目标元素向上滑入隐藏；.slideDown([duration][,complete])目标元素向下滑出显示；.slideToggle([duration][,complete])目标元素隐藏则向下滑出显示，否则向上滑入隐藏；需要的朋友参考下
    2015-08-08
  • jQuery获取父元素节点、子元素节点及兄弟元素节点的方法

    jQuery获取父元素节点、子元素节点及兄弟元素节点的方法

    这篇文章主要介绍了jQuery获取父元素节点、子元素节点及兄弟元素节点的方法,结合实例形式总结分析了jQuery节点操作的相关技巧,需要的朋友可以参考下
    2016-04-04

最新评论