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>
浙公网安备 33010602011771号