Jquery图片随滚动条加载
很久以前的写的Jquery图片随滚动条加载,现在不是什么新技术,应用也很广泛,大大提高图片多的页面打开速度!
有需要的朋友看看吧!有什么意见或建议欢迎留言交流!
Demo.html 源码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery图片随滚动条加载</title>
<meta name="keywords" content="动态加载图片,图片预加载,滚动加载图片,Jquery图片加载,图片随滚动条加载" />
<meta name="description" content="图片随滚动条加载2012-10-11 - 调用方法：$(img).ImageLoad(提前量,滚动条距离图片多少像素加载图片); by TonY-c QQ:20011011" />
<style type="text/css">
img {border:1px solid #cdcdcd;}
.load-img {background: url(data:image/gif;base64,R0lGODlhEAAQAPQAAP///3d3d/r6+pSUlL29vXp6eouLi+jo6NDQ0IKCgrW1ta2trfDw8MfHx+Dg4J2dnaSkpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFUCAgjmRpnqUwFGwhKoRgqq2YFMaRGjWA8AbZiIBbjQQ8AmmFUJEQhQGJhaKOrCksgEla+KIkYvC6SJKQOISoNSYdeIk1ayA8ExTyeR3F749CACH5BAkKAAAALAAAAAAQABAAAAVoICCKR9KMaCoaxeCoqEAkRX3AwMHWxQIIjJSAZWgUEgzBwCBAEQpMwIDwY1FHgwJCtOW2UDWYIDyqNVVkUbYr6CK+o2eUMKgWrqKhj0FrEM8jQQALPFA3MAc8CQSAMA5ZBjgqDQmHIyEAIfkECQoAAAAsAAAAABAAEAAABWAgII4j85Ao2hRIKgrEUBQJLaSHMe8zgQo6Q8sxS7RIhILhBkgumCTZsXkACBC+0cwF2GoLLoFXREDcDlkAojBICRaFLDCOQtQKjmsQSubtDFU/NXcDBHwkaw1cKQ8MiyEAIfkECQoAAAAsAAAAABAAEAAABVIgII5kaZ6AIJQCMRTFQKiDQx4GrBfGa4uCnAEhQuRgPwCBtwK+kCNFgjh6QlFYgGO7baJ2CxIioSDpwqNggWCGDVVGphly3BkOpXDrKfNm/4AhACH5BAkKAAAALAAAAAAQABAAAAVgICCOZGmeqEAMRTEQwskYbV0Yx7kYSIzQhtgoBxCKBDQCIOcoLBimRiFhSABYU5gIgW01pLUBYkRItAYAqrlhYiwKjiWAcDMWY8QjsCf4DewiBzQ2N1AmKlgvgCiMjSQhACH5BAkKAAAALAAAAAAQABAAAAVfICCOZGmeqEgUxUAIpkA0AMKyxkEiSZEIsJqhYAg+boUFSTAkiBiNHks3sg1ILAfBiS10gyqCg0UaFBCkwy3RYKiIYMAC+RAxiQgYsJdAjw5DN2gILzEEZgVcKYuMJiEAOwAAAAAAAAAAAA==) no-repeat 50% 50%;}
</style>
</head>
<body>
<img loadsrc="http://www.ansonika.com/bed-and-breakfast/images/room-1.jpg" width="504" height="366" class="load-img" />
<br /><img loadsrc="http://www.ansonika.com/bed-and-breakfast/images/room-1_2.jpg" width="504" height="366" class="load-img" />
<br /><img loadsrc="http://www.ansonika.com/bed-and-breakfast/images/room-1_3.jpg" width="504" height="366" class="load-img" />
<br /><img loadsrc="http://www.ansonika.com/bed-and-breakfast/images/patio.jpg" width="605" height="352" class="load-img" />
<br /><img loadsrc="http://www.ansonika.com/bed-and-breakfast/images/swimm.jpg" width="605" height="352" class="load-img" />
<br /><img loadsrc="http://www.ansonika.com/bed-and-breakfast/images/seaview.jpg" width="605" height="352" class="load-img" />
<br /><img loadsrc="http://www.ansonika.com/bed-and-breakfast/images/entrance.jpg" width="605" height="352" class="load-img" />
<br /><img loadsrc="http://www.ansonika.com/bed-and-breakfast/images/balcony.jpg" width="605" height="352" class="load-img" />
<br /><img loadsrc="http://www.ansonika.com/bed-and-breakfast/images/parking.jpg" width="605" height="352" class="load-img" />
<br /><img loadsrc="http://webdesignpro09.info/themeforest_underground/underground_white/lib/images/photos/project_1.jpg" width="700" height="450" class="load-img" />
<br /><img loadsrc="http://webdesignpro09.info/themeforest_underground/underground_white/lib/images/photos/project_2.jpg" width="700" height="450" class="load-img" />
<br /><img loadsrc="http://webdesignpro09.info/themeforest_underground/underground_white/lib/images/photos/project_3.jpg" width="700" height="450" class="load-img" />
<br /><img loadsrc="http://webdesignpro09.info/themeforest_underground/underground_white/lib/images/photos/project_4.jpg" width="700" height="450" class="load-img" />
<br /><img loadsrc="http://webdesignpro09.info/themeforest_underground/underground_white/lib/images/photos/project_5.jpg" width="700" height="450" class="load-img" />
<br /><img loadsrc="http://webdesignpro09.info/themeforest_underground/underground_white/lib/images/photos/project_6.jpg" width="700" height="450" class="load-img" />
<br /><img loadsrc="http://webdesignpro09.info/themeforest_underground/underground_white/lib/images/photos/project_7.jpg" width="700" height="450" class="load-img" />
<br /><img loadsrc="http://webdesignpro09.info/themeforest_underground/underground_white/lib/images/photos/project_8.jpg" width="700" height="450" class="load-img" />
<br /><img loadsrc="http://webdesignpro09.info/themeforest_underground/underground_white/lib/images/photos/project_10.jpg" width="700" height="450" class="load-img" />
<br /><img loadsrc="http://webdesignpro09.info/themeforest_underground/underground_white/lib/images/photos/project_11.jpg" width="700" height="450" class="load-img" />
<br /><img loadsrc="http://webdesignpro09.info/themeforest_underground/underground_white/lib/images/photos/project_13.jpg" width="700" height="450" class="load-img" />
<br /><img loadsrc="http://webdesignpro09.info/themeforest_underground/underground_white/lib/images/photos/project_14.jpg" width="700" height="450" class="load-img" />
<br /><img loadsrc="http://webdesignpro09.info/themeforest_underground/underground_white/lib/images/photos/project_15.jpg" width="700" height="450" class="load-img" />
<br /><img loadsrc="http://webdesignpro09.info/themeforest_underground/underground_white/lib/images/photos/project_16.jpg" width="700" height="450" class="load-img" /> <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.7");
google.setOnLoadCallback(function () { /* jquery.ScrollImageLoad.js 开始 */
/*图片随滚动条加载2012-10-11 - 调用方法：$("img").ImageLoad(提前量,滚动条距离图片多少像素加载图片); by TonY-c QQ:20011011*/
(function ($) {
$.fn.extend({
ShowImg: function (h) {
var img = this;
var pageTop = function () {
return document.documentElement.clientHeight + Math.max(document.documentElement.scrollTop, document.body.scrollTop) - (h ? h : -100);
};
var imgLoad = function () {
img.each(function () {
if ($(this).offset().top <= pageTop()) {
var newSrc = $(this).attr("loadsrc");
if (newSrc) $(this).attr("src", newSrc).removeAttr("loadsrc");
}
});
}; imgLoad(); $(window).bind("scroll", function () { imgLoad(); });
}
});
})(jQuery);
/* jquery.ScrollImageLoad.js 结束 */ $(function () {
//测试时调用方法,清除图片缓存
//代码".attr("loadsrc", function () { return $(this).attr("loadsrc") + "?" + Math.random() })"
//实际应用时必须删除
//只保留$("img[loadsrc]").ShowImg();即可;
//$("img[loadsrc]").ShowImg(100); 参数100为提前量,提前100像素加载图片; $("img[loadsrc]").attr("loadsrc", function () { return $(this).attr("loadsrc") + "?" + Math.random() }).ShowImg();
});
});
</script>
</body>
</html>
Jquery图片随滚动条加载的更多相关文章
- jQuery：实现图片按需加载的方法，当要显示内容的高度超过了页面的高度，按需加载，根据滚动条的位置来判断页面显示的内容
实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容 这个类似于京东或淘宝页面,根绝页面的滚动,显示下面的内容 如下图所示,一开始并不是所有的图片 ...
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...
- JS怎样实现图片的懒加载以及jquery.lazyload.js的使用
在项目中有时候会用到图片的延迟加载,那么延迟加载的好处是啥呢? 我觉得主要包括两点吧,第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度:第二是帮助降低服务器负担. 下面介绍一下常用的延迟 ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- 使用jquery插件实现图片延迟加载--懒加载技术
原文链接:http://www.cnblogs.com/lei2007/archive/2013/05/31/3110725.html 感谢作者.以下为原文,备忘仅供自己学习. 第一:lazyLoad ...
- jquery.lazyload.js图片延迟加载(懒加载)--转载
一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动 ...
- 滚动加载图片（懒加载）实现原理（这是旧实现，仅做为获取元素宽高api的参考）
https://www.cnblogs.com/flyromance/p/5042187.html 本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载 ...
- 带你认识网站图片img懒加载和预加载的区别
懒加载 什么是懒加载? 懒加载也就是延迟加载.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览 ...
- jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...
随机推荐
- Linux系统管道命令符
管道命令符“|”的作用是将前一个命令的标准输出作为后一个命令的标准输入,格式为“命令A | 命令B” 以下实例中,通过grep命令搜索关键字“/sbin/nologin”在/etc/passwd中查找 ...
- Android 实现全屏、无标题栏
实现全屏无标题栏: 1.在xml文件中进行配置 AndroidManifest.xml中,找到需要全屏或设置成无标题栏的Activity,在该Activity进行如下配置即可. 实现全屏效果: and ...
- android ADB命令的使用
http://jingyan.baidu.com/article/fcb5aff7f55c63edab4a7174.html 综上所述,我觉得告知各位菜鸟同学如何删除自带的程序是很有必要的一件事情.1 ...
- 数据仓库的自动ETL研究
但是,在实施数据集成的过程中,由于不同用户提供的数据可能来自不同的途径,其数据内容.数据格式和数据质量千差万别,有时甚至会遇到数据格式不能转换或数据转换格式后丢失信息等棘手问题,严重阻碍了数据在各部门 ...
- GitHub的使用（下）—— 如何下载一个已存在的 Repository
导读:本篇主要介绍如何使用EGit下载GitHub上已存在的库.如果不是为了下载一个Java Project,直接在Eclipse中导入使用,那可以使用GitHub的桌面程序(GitHub for W ...
- Android Touch(4)我不知道的MotionEvent（＊）
1,MotionEvent的复制或构造 有时候可能要保存一个MotionEvent, 它的构造方法是匿名的,不能直接创建,对外提供的获取对象的接口是静态的obtain方法,可以从一个MotionEve ...
- BZOJ 2351 Matrix（哈希）
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2351 题意:给出一个n*m的01矩阵.再给出10个A*B的小01矩阵.判断这些小的矩阵是 ...
- hdu 5718 Oracle 高精度
Oracle Time Limit: 8000/4000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) Problem ...
- hdu2847(暴力)
去年看的一道题目,但是竟然傻傻的用dfs+循环链表去做. 简直傻到爆. 不过现在做这题还是想了好久而且还有好几次WA,其实这题还是很水的.直接暴力枚举就行了,枚举的前提是要算好复杂度, 可以知道的是 ...
- POJ2886 Who Gets the Most Candies? 线段树 反素数
题意:有一群小朋友围成一个环,编号1,2,3…N.每个人手上握着一个非0的数字,首先第K个人出列,然后看他手上的数字,假设为m,则从下一个开始第m个人出列,一直如此.并设i为小于等于N的最大反素数,问 ...