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 相关文章推荐
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
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
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
javascript自启动函数的问题探讨
2013/10/05 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
Fiddler如何抓取手机APP数据包
2016/01/22 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
python3中int(整型)的使用教程
2017/03/23 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
Python Collatz序列实现过程解析
2019/10/12 Python
python3中rank函数的用法
2019/11/27 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
大学生思想汇报范文
2013/12/31 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
刑事和解协议书范本
2014/11/19 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
永远是春天观后感
2015/06/12 职场文书
安全教育片观后感
2015/06/17 职场文书
导游词书写之黄山
2019/08/06 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
js实现上传图片到服务器
2021/04/11 Javascript
springboot实现string转json json里面带数组
2022/06/16 Java/Android