jQuery实现鼠标滚动图片延迟加载效果附源码下载_html鼠标滚动图片资源-CSDN文库

162 浏览量 2020-11-26 06:28:57 上传评论收藏 64KB PDF 举报

资源推荐

资源详情

资源评论

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);

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

weixin_38625448

粉丝: 8
资源: 956

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip