js网站顶部进度条插件-插件特效-星河码客

assets/js/script.js(function($){ // An array with photos to show on the page. Instead of hard // coding it, you can fetch this array from your server with AJAX. var photos = [ 'assets/photos/1.jpg', 'assets/photos/2.jpg', 'assets/photos/3.jpg', 'assets/photos/4.jpg', // more photos here ]; $(document).ready(function(){ // Define some variables var page = 0, loaded = 0, perpage = 10, main = $('#main'), expected = perpage, loadMore = $('#loadMore'); // Listen for the image-loaded custom event main.on('image-loaded', function(){ // When such an event occurs, advance the progress bar loaded++; // NProgress.set takes a number between 0 and 1 NProgress.set(loaded/expected); if(page*perpage >= photos.length){ // If there are no more photos to show, // remove the load button from the page loadMore.remove(); } }); // When the load button is clicked, show 10 more images // (controlled by the perpage variable) loadMore.click(function(e){ e.preventDefault(); loaded = 0; expected = 0; // We will pass a resolved deferred to the first image, // so that it is shown immediately. var deferred = $.Deferred().resolve(); // Get a slice of the photos array, and show the photos. Depending // on the size of the array, there may be less than perpage photos shown $.each(photos.slice(page*perpage, page*perpage + perpage), function(){ // Pass the deferred returned by each invocation of showImage to // the next. This will make the images load one after the other: deferred = main.showImage(this, deferred); expected++; }); // Start the progress bar animation NProgress.start(); page++; }); loadMore.click(); }); // Create a new jQuery plugin, which displays the image in the current element after // it has been loaded. The plugin takes two arguments: // * src - the URL of an image // * deferred - a jQuery deferred object, d by the previous call to showImage // // Returns a new deferred object that is resolved when the image is loaded. $.fn.showImage = function(src, deferred){ var elem = $(this); // The deferred that this function will return var result = $.Deferred(); // Create the photo div, which will host the image var holder = $('

').appendTo(elem); // Load the image in memory var img = $(''); img.load(function(){ // The photo has been loaded! Use the .always() method of the deferred // to get notified when the previous image has been loaded. When this happens, // show the current one. deferred.always(function(){ // Trigger a custom event on the #main div: elem.trigger('image-loaded'); // Append the image to the page and reveal it with an animation img.hide().appendTo(holder).delay(100).fadeIn('fast', function(){ // Resolve the returned deferred. This will notifiy // the next photo on the page and call its .always() callback result.resolve() }); }); }); img.attr('src', src); // Return the deferred (it has not been resolved at this point) return result; } })(jQuery);

js网站顶部进度条插件

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»