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"> < ...

随机推荐

可视化MNIST之降维探索Visualizing MNIST: An Exploration of Dimensionality Reduction
At some fundamental level, no one understands machine learning. It isn’t a matter of things being to ...
asp程序调试
最近一直在开发asp的接口.调试一个很大的工作量.每次都让人疯狂.asp当中的提取方式时,因为没有智能提示能工具,很容易丢掉参数.而且,因为是弱类型,可以直接定义使用,不强制声明,看似很方便.很容易出 ...
WINCE设备开机灰屏问题(很怪异)
WINCE设备开机灰屏问题(很怪异) 1. 问题现象图1 无法进入系统,虽然没有调试信息,但应该可以判断是程序跑飞了.我们这款产品用到3种显示屏(采用不同的驱动IC),可是测试发现1和2号屏 ...
图解phpstorm常用快捷键
CTRL+N 查找类 CTRL+SHIFT+N 全局搜索文件 ,优先文件名匹配的文件 CIRL+B 找变量的来源,跳到变量申明处 (CTRL+ 鼠标单击也可以) CTRL+G 定位行,跳转行 CTR ...
Java中的private、protected、public和default的区别
(1)对于public修饰符,它具有最大的访问权限,可以访问任何一个在CLASSPATH下的类.接口.异常等.它往往用于对外的情况,也就是对象或类对外的一种接口的形式. (2)对于protec ...
[ionic开源项目教程] - 第13讲 Service层优化，提取公用Service，以及生活和农业两大模块的实现
关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 这一讲主要实现生活和农业两大模块的实现,在这个过程中,对service层提取出一个公用的BaseService. 这一讲分为 ...
制作自己的Cydia发布源
http://patrickmuff.ch/blog/2013/02/15/create-your-own-cydia-repository-on-ubuntu/ http://www.saurik. ...
MySQL表类型
学习Mysql数据库,Mysql表类型都有哪些是一定需要知道的,下面就为您介绍七种Mysql表类型,希望能对您学习Mysql表类型有所帮助. MySQL作为当前最为流行的免费数据库服务引擎,已经风靡了 ...
SOAP+WSDL
一 SOAPSOAP最开始是用作RPC机制的,后来XML的出现使其应用非常广泛.它与HTTP一样是一种应用级协议,使用他可以在不同的应用程序之间进行数据交换.SOAP可以基于HTTP,也可以基于HTT ...
谷歌浏览器如何设置可以解决Ajax跨域问题？
Ajax本身是不支持跨域的,跨域问题其实很简单,通过浏览器的相应设置可以完成两个不同的服务器或两个不同服务下的项目互相访问.希望大家给予评价及投票. 方法/步骤首先谷歌快捷方式上右击,在下拉列表 ...

Jquery图片随滚动条加载

Jquery图片随滚动条加载的更多相关文章

随机推荐

热门专题