It was written a long time ago Jquery Pictures loaded with scroll bar , It's not a new technology right now , It's also widely used , Greatly improve the opening speed of pages with many pictures !

Let's have a look ! If you have any comments or suggestions, please leave a message !

Demo.html   Source code :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery Pictures loaded with scroll bar </title>
<meta name="keywords" content=" Loading pictures dynamically , Picture preload , Scroll to load pictures ,Jquery Image loading , Pictures loaded with scroll bar " />
<meta name="description" content=" Pictures loaded with scroll bar 2012-10-11 - Calling method :$(img).ImageLoad( Ahead of time , How many pixels is the scroll bar from the picture to load the picture ); 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 Start */
/* Pictures loaded with scroll bar 2012-10-11 - Calling method :$("img").ImageLoad( Ahead of time , How many pixels is the scroll bar from the picture to load the picture ); 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 end */ $(function () {
// Call methods when testing , Clear image cache
// Code ".attr("loadsrc", function () { return $(this).attr("loadsrc") + "?" + Math.random() })"
// It must be removed in practical application
// Only keep $("img[loadsrc]").ShowImg(); that will do ;
//$("img[loadsrc]").ShowImg(100); Parameters 100 In order to advance the quantity , advance 100 Pixel loading picture ; $("img[loadsrc]").attr("loadsrc", function () { return $(this).attr("loadsrc") + "?" + Math.random() }).ShowImg();
});
});
</script>
</body>
</html>

Jquery More related articles loaded with the picture scroll bar

  1. jQuery: How to load pictures on demand , When the height of the content to be displayed exceeds the height of the page , Load on demand , According to the position of the scroll bar to determine the content of the page display

    How to load pictures on demand , When the height of the content to be displayed exceeds the height of the page , Load on demand , According to the position of the scroll bar to determine the content of the page display This is similar to Jingdong or Taobao page , Eliminate page scrolling , Show the following As shown in the figure below , Not all the pictures in the beginning ...

  2. [JS The front-end development ] js/jquery Control page dynamic loading data The slider automatically loads Events

    Page scrolling dynamic loading data , Page dropdown automatically loads content I believe many people have seen the picture layout of waterfall flow , Those pictures are loaded dynamically , The effect is very good , The pressure on the server is much less I believe those who have mobile phones have seen this effect : Get into qq Space , Pull it down ...

  3. JS How to realize lazy loading of pictures and jquery.lazyload.js Use

    Delayed loading of images is sometimes used in projects , So what are the benefits of delayed loading ? I think it mainly includes two points , The first is that in a long page containing many large images, delaying loading images can speed up the loading speed of the page : The second is to help reduce the burden on the server . Here are some common delays ...

  4. js/jquery Control page dynamic loading data The slider automatically loads Events -- It's someone else's

    js/jquery Control page dynamic loading data The slider automatically loads Events -- It's someone else's I believe many people have seen the picture layout of waterfall flow , Those pictures are loaded dynamically , The effect is very good , The pressure on the server is much less I believe all those with mobile phones have seen this ...

  5. Use jquery The plug-in implements delayed loading of pictures -- Lazy loading technology

    Link to the original text :http://www.cnblogs.com/lei2007/archive/2013/05/31/3110725.html Thanks to the author . The following is the original , Notes are for your own study only . First of all :lazyLoad ...

  6. jquery.lazyload.js Delayed image loading ( Lazy loading )-- Reprint

    One . The plugin is introduced jquery.lazyload.js It's a use. JavaScript Compiling jQuery plug-in unit . It can delay loading images in long pages . Images outside the browser's viewable area will not be loaded , Until the user scrolls the page ...

  7. Scroll to load pictures ( Lazy loading ) Realization principle ( This is the old implementation , Just to get the element width and height api The reference of )

    https://www.cnblogs.com/flyromance/p/5042187.html This paper mainly explains the principle of lazy loading technology through the following aspects , Personal dishes , Please point out more mistakes One . What is picture scrolling loading ...

  8. Take you to know the website pictures img The difference between lazy loading and preloading

    Lazy loading What is lazy loading ? Lazy loading is also called lazy loading . When visiting a page , The first img Replace the path of the background image of the element or other elements with a picture of the size 1*1px Path to picture ( So it's just one request , It is commonly known as Zhan bitmap ), Only when the picture appears in the browser ...

  9. jquery mobile Add the loading effect when the page loads document.ready and window.onload Comparison of execution order

    Want to add this effect , Let's first understand the page loading and event execution sequence , Look at this simple example : <html xmlns="http://www.w3.org/1999/xhtml"> < ...

Random recommendation

  1. python The difference between non keyword variable length parameter and keyword variable parameter in Chinese

    # Non keyword variable length parameter def add(*arg):    return type(arg) print add() # Print the results <type 'tuple'> # Keyword variable parameter def ab ...

  2. Amazon Dynamo Thesis study

    Dynamo It's a key-value Data storage system , De centralization . Highly scalable . High availability , Use consistent hashing to partition and back up data , Use data versioning for consistency . The core technology CAP: Uniformity . Usability . Extensibility Consistent Hashing : Tangent fraction ...

  3. Shop to shop connectivity ( Beijing ) Technology Development Co., Ltd DS365.com

    Shop to shop connectivity (DS365) It is the most famous community in Beijing O2O Platform service provider , Shop to shop connectivity (DS365) Through the self-developed mobile order distribution and network marketing service platform , Supported by mobile Internet and big data , Provide mobile phone orders for community supermarket stores . matter ...

  4. 20135202 Yan Jiaxin --week 9 Interim summary

    Interim summary The main content of the first half of the semester is learning mooc Course <Linux Kernel analysis > And Textbooks <Linux Kernel design and implementation >. The knowledge points involved are summarized as follows : 1. Linux The process of kernel startup -- With Me ...

  5. The embedded ntp Server migration

    One . Cross compilation 1. Download from the official website http://www.ntp.org/ Click on download Options page My version is ntp-4.2.6p5.tar.gz 2. decompression tar -zxvf ntp-4.2.6p5.tar ...

  6. MAC OS X 10.10 After the application failed to download lunchpad The solution to creating a gray icon

    The method is as follows : open the application - Utilities - terminal . In this way, we can enter and exit the following characters defaults write com.apple.dock ResetLaunchPad -bool true killall Doc ...

  7. About synchronized Synchronous operation of

    There are generally two ways Synchronization method and synchronization code block hypothesis P1.P2 Is a different object of the same class , This class defines synchronization blocks or synchronization methods for the following situations ,P1.P2 You can call them all . 1. hold synchronized As a function modifier , ...

  8. 【Alpha】 Team project test reports and user feedback

    Test report One . WEB End test The test page Testing capabilities / Interface function / Interface description Test the expected effect Test purpose Whether it is completed or not (Y/N) Internet Explorer Google chrome Firefox S ...

  9. VS2015 Installation and configuration of the development environment 2016-07-03 to update

    Date of creation :2016-07-03 One . brief introduction To avoid the clutter of outdated introductions on the Internet , Avoid misleading beginners , This time, I'm going to 2016 year 6 End of month C# The update and installation process of various versions of the development environment should be reorganized and contributed . The purpose is to make the right C# I'm interested in ...

  10. Dry cargo sharing 9 It's a very selective one HTML5 application

    For front-end developers , Share some excellent HTML5 Applications can be used directly , More importantly, it can stimulate the inspiration of creation . Today we're going to share 9 It's a very selective one HTML5 application , They're all dry goods . 1.HTML5/CSS3 Slider animation menu Icon animation ...