用jQuery imagesLoaded plugin实现页面加载效果

最新推荐文章于 2024-03-20 09:36:01 发布

magic_7X

最新推荐文章于 2024-03-20 09:36:01 发布

阅读量1.3k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/a741423206/article/details/21389991

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.今天上网看到这个页面加载效果，觉得做的体验比较好，可以跟FL媲美，只不过他是HTML的。我这只说了原理与关键代码。

下面是这页面地址http://www.quyeba.com/explorer/?utm_source=Mafengwo&utm_medium=CPM&utm_term=&utm_content=TF050&utm_campaign=TNF_FW13&smt_b=C0B0A09080706058992F10C#_home

2.首先是他的加载代码，他是直接写在BODY下面

<div id="preloader">
 	<a href="http://www.quyeba.com/" target="_blank" onClick="_smq.push(['custom','导航栏','TNF去野吧']);" class="p-logo"><img src="http://s.qybimg.com/explorer/images/site_logo.png">
    <div class="preloader-main">
    	<p class="slogan"><img src="http://s.qybimg.com/explorer/images/loading_slogan.png">
        <div><img src="http://s.qybimg.com/explorer/images/loading_ren.gif"></div>
        <p id="percentage">0%
        <img src="http://s.qybimg.com/explorer/images/loading_dotted.png">
        <div class="pre-txt-panel">
        	<ul>
            	<li><img src="http://s.qybimg.com/explorer/images/loading_txt1.png"></li>
                <li><img src="http://s.qybimg.com/explorer/images/loading_txt2.png"></li>
                <li><img src="http://s.qybimg.com/explorer/images/loading_txt3.png"></li>
                <li><img src="http://s.qybimg.com/explorer/images/loading_txt1.png"></li>
            </ul>
        </div>
    </div>
</div>

3.他调用了图片加载插件jQuery imagesLoaded plugin

jquery.imagesloaded.js

4.下面是公用初始方法

/***********************************
		Public Method
	***********************************/
	function init(){

		window.scrollTo(0,0);

		//set doms
		mainDom = $('#main');
		sideMenu = $('#side-menu');
		pages = $('.page');
		
		pageLength = pages.length;
		
		var imgs = $("img");
		var progress = $("#percentage");
		
		allimg_count = imgs.length;
		imgs.each(function(){
			if(navigator.userAgent.indexOf('Firefox') > 0){
				$(this).load(function(){
					img_count++;
					progress.text(String( Math.floor((img_count/allimg_count)*100)+"%" ));
					})
			}else{
				$(this).imagesLoaded(function(){
					img_count++;
					console.log(img_count +'  '+allimg_count)
					progress.text(String( Math.floor((img_count/allimg_count)*100)+"%" ));
				})
			}
			})
		};
		
		var loadingTxt = $('#preloader .pre-txt-panel ul');
		var loadingTxtIndex = 0;
		function loadingMarquee(){
			loadingTxt.animate({'margin-top':-1 * loadingTxtIndex * 132},1000,function(){
				loadingTxtIndex ++;
				if(loadingTxtIndex == 4){
					loadingTxt.css('marginTop',0);	
					loadingTxtIndex = 1;
				}																	  
			});	
			setTimeout(loadingMarquee,4000);
		}
		loadingMarquee();
		
		$(window).load(function(){
			_startUp();
		});
		
	
	
	return {
		init : init,
		moveTo : moveTo,
		getWindowHeight : getWindowHeight,
		getWindowWidth : getWindowWidth,
		getCurrentIndex : getCurrentIndex,
		attachMouseWheel:attachMouseWheel,
		detachMouseWheel:detachMouseWheel
	}
	
})(jQuery);

我们看下关键代码

var imgs = $("img");		//获取页面所有图片
		var progress = $("#percentage");//获取进度百分比ID标签
		
		allimg_count = imgs.length;//所有的图片数量
		imgs.each(function(){给所有图片来个遍历
			if(navigator.userAgent.indexOf('Firefox') > 0){ //判断是否Firefox，因为Firefox用LOAD函数就可以实现，其它浏览器用插件imagesLoaded。  $(this).load(function(){
					img_count++;//记录己加载一张
					progress.text(String( Math.floor((img_count/allimg_count)*100)+"%" ));//显示百分比。
					})
			}else{
				$(this).imagesLoaded(function(){
					img_count++;
					console.log(img_count +'  '+allimg_count)
					progress.text(String( Math.floor((img_count/allimg_count)*100)+"%" ));
				})
			}
			})
		};

5.网上找了下，关于jQuery imagesLoaded plugin插件例子比较少，希望大家看到这个例子，会更了解jQuery imagesLoaded plugin一些。下面是官方的一个示例

imagesLoaded( document.querySelector('#container'), function( instance ) {
  console.log('all images are loaded');
}); // selector string 

imagesLoaded( '#container', function() {...}); // multiple elements 

var posts = document.querySelectorAll('.post');
imagesLoaded( posts, function() {...});

阅读(677) | 评论(0) | 转发(0) |

上一篇：没有了

下一篇：ZendFramework-Zend_Acl-权限管理简单实现权限管理