`

图片预加载学习(一):无序加载之图片切换

阅读更多

先来个基本效果的图:

图片是百度上瞎搜的,大家凑合看。

然后说说节本业务:打开页面时显示一个进度条,是“所有图片加载的进度信息”,等所有的图片都加载完成了再开始显示上图的效果。

 

再然后还是那几句:

这个特效是跟着慕课网上的视频学的,视频链接如下:https://www.imooc.com/learn/502
源码和技术点已经上传到附件,有需要的可以查看、下载。

下面直接上代码(PS:代码中的注释是根据个人理解添加的,并不是老师原有的注释):

1、页面基本结构

<div class="box">
	<img 
	src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498048638722&di=93633bebf0b1fc921fc42e8d0644e9c1&imgtype=0&src=http%3A%2F%2Fatt.bbs.duowan.com%2Fforum%2F201604%2F12%2F210015dj7ay5yw9ylaymmn.jpg" 
	id="imgArea"
	width="1200"/>
	<p>
		<a href="javascript:void(0)" class="btn" data-control="prev">上一页</a>
		<a href="javascript:void(0)" class="btn" data-control="next">下一页</a>
	</p>
</div>

<!-- 加载提示框 -->
<div class="loading">
	<p class="progress">0%</p>
</div>

2、CSS样式

<style>
html,body{
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
}
a{text-decoration: none;}
.box{text-align: center;}
.btn{
	display:inline-block;
	height:40px;
	line-height: 40px;
	border:1px solid #ccc;
	background-color: #fff;
	padding: 0 15px;
	margin-right:50px;
	color:#333;
}
.btn:hover {
	background-color: #eee;
}
.loading{
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: #eee;
	text-align: center;
	font-size: 30px;
}
.progress{
	margin-top: 420px;
}
</style>

3、JS代码(附件中JS文件夹下demo1_preload(无序加载,非插件).js):

//图片数组
var imgs=[
		  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498048638722&di=93633bebf0b1fc921fc42e8d0644e9c1&imgtype=0&src=http%3A%2F%2Fatt.bbs.duowan.com%2Fforum%2F201604%2F12%2F210015dj7ay5yw9ylaymmn.jpg",
		  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046785208&di=2e693fe255f7dc064bf940d16b5d8b6b&imgtype=0&src=http%3A%2F%2Fbbsfiles.vivo.com.cn%2Fvivobbs%2Fattachment%2Fforum%2F201601%2F06%2F113313hbbbrf3fqw3qzbxp.jpg",
		  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046876926&di=78448958bad3463d63acb892052582fa&imgtype=0&src=http%3A%2F%2Fstatic01.coloros.com%2Fbbs%2Fdata%2Fattachment%2Fforum%2F201506%2F22%2F230200woaarrmta41rgket.jpg",
		  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046913853&di=ee33b4635aa2fad919360084ff52ff43&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201502%2F13%2F174551vk3qq9nyeq965kml.jpg",
		  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046893014&di=d038443067de0796e68e70464768da83&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201410%2F25%2F220832wlwzqq6ble9ql6rd.jpg",
		  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046883822&di=9190192e9187c4f9098eded1b593b5f4&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201503%2F06%2F162347xwvgpdfpw5p7rvvv.jpg",
		  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498641626&di=6405f296231e22070f1e2eeafe631b88&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.iforworld.com%2Fbizhi%2F4k%2Fpic%2F20160224%2F003.JPG",
		  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046940019&di=b91053d71c20207d04cfc6d3cb386067&imgtype=0&src=http%3A%2F%2Fi7.download.fd.pchome.net%2Ft_2560x1600%2Fg1%2FM00%2F12%2F1A%2FooYBAFaxvnaIYS82AB4dTtRS-E4AAC3fwLtL7EAHh1m451.jpg"
		  ];
var index = 0,len = imgs.length,count=0;
//alert(document.documentElement.clientHeight);//获取页面的高度
$(function(){
	var $progress = $(".progress");
	//预加载各张图片
	$.each(imgs,function(i,src){
		var imgObj = new Image();
		imgObj.src = src;
		//正常加载
		$(imgObj).bind("load error",function(){
			//alert((count+1)+"\n"+len+"\n"+(count+1)/len);
			$progress.html(Math.round((count+1)/len*100)+"%");
			//当图片预加载完成显示第一张图片的信息
			if(count>=len-1){
				//显示图片
				$(".loading").hide();//隐藏
				document.title="1/"+len;
			}
			count++;
		});
	});
	
	//按钮的点击事件
	$(".btn").click(function(){
		if("prev"===$(this).attr("data-control")){//上一张
			index--;//下标减小
			if(index<0) index = 0;
			//index = Math.max(0,--index);//index先--,之后得到的值与0比较,返回较大的值
		}else{//下一张
			index++;//下标增大
			if(index>len-1){//数组下标从0开始
				index = len-1;
			}
			//index = Math.min(len-1,++index);
		}
		document.title=(index+1)+"/"+len;
		$("#imgArea").attr("src",imgs[index]);
	});
});

4、将第三步中加载图片的代码写成插件进行调用

插件代码(附件中JS文件夹下preload.js):

//图片预加载

//使用闭包模拟局部作用域
/*
(function(){
})();
*/

//传入jQuery对象,用$来接收,这样子就可以使用jQuery了
/*
(function($){
})(jQuery);
*/

(function($){
	//构造函数
	//imgs:图片数组
	//options:参数
	function PreLoad(imgs,options){
		//若传入图片数组的是字符串,手动转成数组
		this.imgs = ((typeof imgs)==="string"?[imgs]:imgs);
		
		//将传入的options参数替换掉默认的PreLoad.DEFAULTS,生成一个新的对象,并返回给this.opts
		this.opts = $.extend({},PreLoad.DEFAULTS,options);
		
		//无序方法:下划线表示这个方法只在内部使用,不提供外部调用
		this._unordered();
	}
	
	//设置默认参数
	PreLoad.DEFAULTS={
		each:null,//每一张图片加载完成后执行
		all:null//所有图片加载完成后执行
	};
	
	//在原型上添加无序加载的代码
	PreLoad.prototype._unordered=function(){
		//预加载各张图片
		var imgs = this.imgs,
			opts = this.opts,
			count = 0,
			len = imgs.length;
		$.each(imgs,function(i,src){
			if(typeof src != "string"){ return ;}//不是字符串直接返回
			
			var imgObj = new Image();
			imgObj.src = src;
			//正常加载或加载失败都执行该方法,以避免“加载失败时页面一直都显示正在加载数据”的问题
			$(imgObj).bind("load error",function(){
				opts.each && opts.each(count);
				//当图片预加载完成显示第一张图片的信息
				if(count>=len-1){
					//显示图片
					opts.all && opts.all();//若是有all就调用all()方法
				}
				count++;
			});
		});
	};
	
	//定义一个工具方法
	$.extend({
		preload:function(imgs,opts){
			new PreLoad(imgs,opts);
		}
	});
})(jQuery);

//插件学习方法:http://www.imooc.com/video/14434/0

页面调用:第三步JS中“预加载各张图片”的代码由原来的改成以下内容:

//预加载各张图片
$.each(imgs,function(i,src){
	var imgObj = new Image();
	imgObj.src = src;
	//正常加载
	$(imgObj).bind("load error",function(){
		//alert((count+1)+"\n"+len+"\n"+(count+1)/len);
		$progress.html(Math.round((count+1)/len*100)+"%");
		//当图片预加载完成显示第一张图片的信息
		if(count>=len-1){
			//显示图片
			$(".loading").hide();//隐藏
			document.title="1/"+len;
		}
		count++;
	});
});

(PS:附件中的demo1(图片无序加载).html就是使用插件进行加载的)

最后,感谢老师,也祝大家好运!

  • 大小: 449.2 KB
分享到:
评论

相关推荐

    图片预加载学习(三):无序加载之图片切换

    在本文中,我们将深入探讨“图片预加载学习”的第三部分,重点关注无序...掌握预加载技术,尤其是无序加载和图片切换,是现代前端开发者必备的技能之一。结合提供的资源,读者可以通过实践进一步加深对这一主题的理解。

    jquery图片切换案例

    9. **预加载效果**:在图片加载之前,可以展示占位符或加载动画,提高用户体验。使用`.load()`事件监听图片加载状态。 在实际应用中,可以根据需求选择或组合这些案例,同时也可以利用jQuery插件如`swiper`、`...

    图片,菜单式图片,不停的变换

    7. **图片预加载**:为了提升用户体验,避免图片加载延迟,可能会使用JavaScript进行图片预加载,确保用户在切换到下一张图片时能立即看到完整的内容。 8. **交互设计**:菜单式图片可能还包含用户交互元素,如左右...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    91. 又一款非常不错的jQuery+div大气新闻图片切换插件代码(AnythingSlider)下载 92. 基于jQuery带时间轴宽屏图片切换源码 93. 基于jQuery的横向无缝图片滚动插件jcarousel 94. 实用jquery焦点图源码2 95. 常用...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    91. 又一款非常不错的jQuery+div大气新闻图片切换插件代码(AnythingSlider)下载 92. 基于jQuery带时间轴宽屏图片切换源码 93. 基于jQuery的横向无缝图片滚动插件jcarousel **** …… …… …… 很多很多

    jquery 动态示例

    91. 又一款非常不错的jQuery+div大气新闻图片切换插件代码(AnythingSlider)下载 92. 基于jQuery带时间轴宽屏图片切换源码 93. 基于jQuery的横向无缝图片滚动插件jcarousel 94. 实用jquery焦点图源码2 95. 常用...

    100多个JQuery效果示例(实例)div+css+javascrpit

    91. 又一款非常不错的jQuery+div大气新闻图片切换插件代码(AnythingSlider)下载 92. 基于jQuery带时间轴宽屏图片切换源码 93. 基于jQuery的横向无缝图片滚动插件jcarousel 94. 实用jquery焦点图源码2 95. 常用...

    JavaScript实现PC端横向轮播图

    JavaScript 实现PC端横向轮播图是一种常见的网页交互效果,用于展示多张图片或内容,让用户可以方便地...在实际开发中,还可以考虑添加更多的功能,如图片预加载、触摸事件支持、动态加载更多图片等,以提升用户体验。

    JS实现列表式摄影作品展示代码

    3. **图片加载**:使用`new Image()`创建图片对象预加载图片,确保在展示时图片已经完全加载。 4. **动画效果**:通过改变CSS属性(如`opacity`、`transform`等)来添加过渡动画,提高用户体验。 5. **响应式设计**...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    一款jQuery动感左右滚动图片切换插件带缩图一起滚动 68.一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69.一款jquery实现图片放大插件imgBox下载 70.一款jQuery实现漂亮精美相册插件...

    简单的jquery轮播效果

    5. **预加载图片**:通过JavaScript预加载即将显示的图片,减少加载时的延迟。 通过不断迭代和改进,你可以构建出更强大、更灵活的jQuery轮播插件,以满足各种应用场景的需求。 总的来说,jQuery轮播效果是网页...

    60个实用的jQuery代码片段.pdf

    15. **预加载图片**:预加载图片以优化用户体验,`$.ajax({url: "image.jpg", type: "GET", cache: true})`。 16. **事件委托**:使用`on()`方法进行事件委托,如`$("#container").on("click", ".target", function...

    FckEditor使用积累

    1. **编辑器无法加载**:检查路径是否正确,确保所有依赖文件已加载。 2. **图片上传失败**:检查上传设置,确保有权限写入文件,并配置好上传路径。 3. **样式显示异常**:确保你的CSS样式与编辑器兼容,避免使用...

    凡客诚品页面模板.zip

    4. **CSS属性**:如`color`定义文字颜色,`background-color`设定背景色,`font-size`调整字体大小,`margin`和`padding`控制元素的边距和内填充,`display`属性可以切换元素的显示方式(如块级元素、行内元素或隐藏...

    html+css+js总结笔记

    - **`&lt;pre&gt;`**:预格式化文本。保留所有空白字符,如空格和换行符。 - **`&lt;marquee&gt;`**:滚动显示文本或图像。这是一个非标准标签,在现代 Web 开发中不推荐使用。 - **`&lt;dl&gt;`**、**`&lt;dt&gt;`** 和 **`&lt;dd&gt;`**:定义...

    网页前端高级编程-实验报告-网站综合制作.doc

    首先,通过`querySelectorAll`选取所有的图片元素,然后设置定时器`setInterval`每隔一定时间自动切换图片。在切换过程中,使用`for`循环改变图片的显示状态。当鼠标悬浮在分页上时,停止轮播,离开时恢复。关键代码...

    视频播放+列表

    通过`&lt;video&gt;`标签,我们可以指定视频源(src)、设置宽度和高度、添加预加载和控制选项等。例如: ```html Your browser does not support the video tag. ``` 控制属性(controls)会显示播放、暂停、...

    jquery 插件集合(最全)

    接着是**jQuery TABPANEL**,TabPanel通常用于将大量内容分隔到不同的面板中,每个面板对应一个标签页,用户可以通过点击标签切换显示内容。jQuery Tab插件提供了创建和管理这些标签页的功能,支持动态加载内容、...

    前端网页设计-旅游城市介绍-html+css+javascript

    3. **AJAX (Asynchronous JavaScript and XML)**: 用于异步加载新的数据,如城市信息、图片或评论,无需刷新整个页面。 4. **表单验证**: 检查用户输入的有效性,如邮箱格式、必填项等。 5. **动画效果**: 使用...

Global site tag (gtag.js) - Google Analytics