jQuery lazyload 的重复加载错误以及修复方法


Posted in Javascript onNovember 19, 2010

分析代码也可以知道。
最主要的原因是 写在页面上的 <img src="the_big_img_toLoad.jpg" />一经加载,就去向服务器申请图片地址,加载大图片。
如果想实现原定的效果,则 写在页面上的待加载地址 必须不能是大图片的地址,而我们可以将真正的图片地址数据 存储在alt属性中。
正确的例子如下:

<a href="#nogo"><img alt="https://3water.com/comstyles/img200-150-3.jpg" src="http://sc.3water.com/style/img/spacer.gif" alt="200-150" /></a> 
<a href="#nogo"><img alt="https://3water.com/comstyles/img200-150-4.jpg" src="http://sc.3water.com/style/img/spacer.gif" alt="200-150" /></a>

对原来的 jquery.lazyload.js我们也需要做一点改动:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="lazyload.js"></script> 
<script type="text/javascript"> //初始化代码 
$(document).ready(function(){ 
$("#lazy1 img,#lazy2 img").lazyload({ 
placeholder : "http://sc.3water.com/style/img/spacer.gif", 
effect : "fadeIn" 
}); 
}); 
</script>

完整实例如下:
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>无标题文档</title> 
<style type="text/css"> 
img{ display:block; border:2px solid #ccc; margin:0 0 10px;} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="lazyload.js"></script> 
<script type="text/javascript"> //初始化代码 
$(document).ready(function(){ 
$("#lazy1 img,#lazy2 img").lazyload({ 
placeholder : "http://qsl.cn/style/img/spacer.gif", 
effect : "fadeIn" 
}); 
}); 
</script> 
</head> 
<body> 
<div style=" height:900px; width:400px; background:#eee;"> 
<a href="#nogo"><img src="http://www.titan24.com/comstyles/img200-150-2.jpg" alt="200-150" /></a> 
第一屏高度为900px,滚动到下面的时候,相应图片才开始加载 
</div> 
<div id="lazy1" style="width:350px; margin-bottom:340px;"> 
<a href="#nogo"><img alt="http://www.titan24.com/comstyles/ad400-300.jpg" src="http://qsl.cn/style/img/spacer.gif" alt="400-300" /></a> 
<a href="#nogo"><img alt="http://www.titan24.com/comstyles/img200-150-1.jpg" src="http://qsl.cn/style/img/spacer.gif" alt="200-150" /></a> 
<a href="#nogo"><img alt="http://www.titan24.com/comstyles/img200-150-2.jpg" src="http://qsl.cn/style/img/spacer.gif" alt="200-150" /></a> 
</div> 
<div id="lazy2" style="width:350px;"> 
<a href="#nogo"><img alt="http://www.titan24.com/comstyles/img200-150-3.jpg" src="http://qsl.cn/style/img/spacer.gif" alt="200-150" /></a> 
<a href="#nogo"><img alt="http://www.titan24.com/comstyles/img200-150-4.jpg" src="http://qsl.cn/style/img/spacer.gif" alt="200-150" /></a> 
<a href="#nogo"><img alt="http://www.titan24.com/comstyles/img560-300-1.jpg" src="http://qsl.cn/style/img/spacer.gif" alt="200-150" /></a> 
<a href="#nogo"><img alt="http://www.titan24.com/comstyles/img560-300-2.jpg" src="http://qsl.cn/style/img/spacer.gif" alt="200-150" /></a> 
<a href="#nogo"><img alt="http://www.titan24.com/comstyles/img560-300-3.jpg" src="http://qsl.cn/style/img/spacer.gif" alt="200-150" /></a> 
<a href="#nogo"><img alt="http://www.titan24.com/comstyles/img560-300-4.jpg" src="http://qsl.cn/style/img/spacer.gif" alt="200-150" /></a> 
</div> 
</body> 
</html>

测试可知 是真正的按需加载。而不是像之前,先加载了,滚动到相应位置 还又加载了一次。
Firebug的眼睛还是雪亮的。
Javascript 相关文章推荐
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 #Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 #Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 #Javascript
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 #Javascript
Google AJAX 搜索 API实现代码
Nov 17 #Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 #Javascript
菜鸟学习JavaScript小实验之函数引用
Nov 17 #Javascript
You might like
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
初学JavaScript第二章
2008/09/30 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
金融专业毕业生推荐信
2013/11/26 职场文书
教学器材管理制度
2014/01/26 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
交通事故委托书范本
2014/09/28 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
安全生产学习心得体会
2016/01/18 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL