网站图片按顺序加载显示

好吧  我自己已解决 分享一下[color=#FF0000]ajax.jsp[/color]里面没内容 只是为了使ajax能成立
	$(document).ready(
					function() {
						var path = $("#path").val();
						  $.ajax({
								url : path + "/pr/ajax.jsp",
									  dataType : "html",
									  type : 'get',
									  success : function(data) {
										$("#div").html("<div class=\"m-cnt cnt2\" id=\"div1\"><img src=\"${pageContext.request.contextPath}/pr/img/images_1.png\" alt=\"以个人电脑为信息交互\" /></div>");
										/*-----1-------------------------------------------*/
										$.ajax({
											url : path + "/pr/ajax.jsp",
											dataType : "html",
											type : 'get',
											success : function(data) {
											$("#div1").after("<div class=\"m-cnt cnt2\" id=\"div2\"><img src=\"${pageContext.request.contextPath}/pr/img/images_2.png\" alt=\"随时随地3C平台信息交流\" /></div>");
                                        /*-----2-------------------------------------------*/
												 $.ajax({
													url : path + "/pr/ajax.jsp",
													dataType : "html",
													type : 'get',
													success : function(data) {
													$("#div2").after("<div class=\"m-cnt cnt2\" id=\"div3\"><img src=\"${pageContext.request.contextPath}/pr/img/images_3.png\" alt=\"多名家庭成员同时使用同一台电脑\" /></div>");
				                                       /*-----3-------------------------------------------*/
														 $.ajax({
															url : path + "/pr/ajax.jsp",
															dataType : "html",
															type : 'get',
															success : function(data) {
															$("#div3").after("<div class=\"m-cnt cnt2\" id=\"div4\"><img src=\"${pageContext.request.contextPath}/pr/img/images_4.png\" alt=\"手机、平板深度办公\" /></div>");

				                                          /*-----4-------------------------------------------*/
														    /*$.ajax({
																url : path + "/pr/ajax.jsp",
																dataType : "html",
																type : 'get',
																success : function(data) {
																$("#div4").after("<div class=\"m-cnt cnt2\" id=\"div4\"><img src=\"${pageContext.request.contextPath}/pr/img/images_5.png\" alt=\"以个人电脑为信息交互\" /></div>");*/
					                                         /*-----foot1----------------------------------------------*/
					                                            $.ajax({
																	url : path + "/pr/ajax.jsp",
																	dataType : "html",
																	type : 'get',
																	success : function(data) {
																 	$("#foot1").html("<img src=\"${pageContext.request.contextPath}/pr/img/images_6.png\" />");
															 	        /*-----foot2----------------------------------------------*/
					                                                     $.ajax({
																				url : path + "/pr/ajax.jsp",
																				dataType : "html",
																				type : 'get',
																				success : function(data) {
																			 	$("#foot2").html("<img src=\"${pageContext.request.contextPath}/pr/img/images_20.png\" alt=\"以个人电脑为信息交互\" />");
<div style="text-align: right;"></div>																	  		  }
																	     });
					                                                      /*-----foot2----------------------------------------------*/
																	}
																	});
					                                            /*-----foot1----------------------------------------------*/
																/*		}
																	});*/
												        /*-----4-------------------------------------------*/
																	}
																});
												        /*-----3-------------------------------------------*/
															}
												});
										/*-----2-------------------------------------------*/
													}
												});
										/*-----1-------------------------------------------*/

									}
								});
					});

时间: 2024-08-06 03:44:14

网站图片按顺序加载显示的相关文章

高性能网站优化-确保异步加载脚本时保持执行顺序

<高性能网站建设进阶指南> 脚本如果按照常规方式加载,不仅会阻塞页面中其他内容的下载,还会阻塞脚本后面所有元素的渲染.异步加载脚本可以避免这种阻塞现象,从而提高页面加载速度.但是性能的提升是要付出代价的.代码的异步执行可能会出现竞争状态.简单地说就是页面内部的脚本需要的标示符如果是在外部文件中定义的,而当外部文件异步加载的时候,如果没有保证外部文件和内部脚本执行顺序,很有可能会出现未定义标示符的错误 当异步加载的外部脚本与行内脚本之间存在代码依赖时,就需要通过一种保证执行顺序的方法来整合这两个

预加载显示图片的艺术

一般情况下网页中的图片都是随文档流依次加载的,什么时候用到则什么时候加载,但是有些时候这样的加载方式往往会影响用户体验,比如鼠标hover变换背景图片的时候,只有鼠标移入才会对变换的图片进行加载,这样就可能会出现片刻的加载空白现象:又比如图片显示后隐藏再显示网站内容等也是同样的道理. 为了在必要的时候增加用户体验,提高网页的交互逼格,这里不得不介绍下图片预加载的艺术啦. 那么什么是图片预加载呢? 道理很简单啦,虽然某些图片一时半会我用不到,但是为了避免使用时出现的措手不及的现象,我还是乖乖把它们

Android:漫画APP开发笔记之从WAP网站解析图片地址并加载图片

一.使用Jsoup解析网页 <pre><code class="prettyprint"><span class="typ">Document</span><span class="pln"> doc </span><span class="pun">=</span><span class="pln">

jQuery顺序加载图片(终版)

这一篇是对上一篇(jQuery顺序加载图片(初版)--http://www.cnblogs.com/newbie-cc/p/3707504.html)的改进. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function loadImage(imgList,callback){         if(!$.isArray(imgList) || !$.isFunction(callback)) return ;         var imageDat

浏览器加载显示html页面内容的顺序

我们经常看到浏览器在加载某个页面时,部分内容先显示出来,又有些内容后显示.那么浏览器加载显示html究竟是按什么顺序进行的呢 其实浏览器加载显示html的顺序是按下面的顺序进行的:1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完).3.如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载.4.并且在下载后进行解析,解析过

网站优化--图片的预加载与懒加载(上)

1.延迟加载即懒加载,主要目的是作为服务器前端的优化,减少请求数或延迟请求数,在一些图片非常多的网站中非常有用,当图片位置进入到可视区的时候才会被加载,这样对于含有很多 图片的比较长的网页来说,可以加载的更快,并且还能节省服务器带宽 最常用的方式是:监控滚动条的高度,当滚动条高度和可视区高度之和小于图片位置距离页面的高度时会被加载 2.预加载:在查看前面张图片的时候加载后面的图片,在提升用户体验的同时会增加服务器的压力 常用方式:创建image对象,通过src属性加载url资源,当资源加载完成后

jQuery:实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容

实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容 这个类似于京东或淘宝页面,根绝页面的滚动,显示下面的内容 如下图所示,一开始并不是所有的图片都显示,当滚动条移动到页面最下面的时候,再显示下面的内容 解决思路:通过判断滚动条是否滚动到了页面的最下面,如果滚动到了页面的最下面,则重新加载图片 知识点:1.offset() 方法返回或设置匹配元素相对于文档的偏移(位置) 返回第一个匹配元素的偏移坐标. 该方法返回的对象包含两个整型属性:top

从输入 URL 到页面加载显示完成的过程

前言:"一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?" 这个问题我想大多数人都不会陌生,好像是前端面试题经常会出现的,在此我也好好梳理梳理了一番,总结成这篇文章,希望能对和我一样在前端道路上奋进的小白们有所帮助,一起学习,交流. 我把这个问题拆解成两个过程: 1. 用户输入 url ---> 客户端(浏览器)拿到服务端的数据 2. 浏览器拿到数据 ---> 呈现页面(也就是浏览器工作过程) 搞清楚这两个过程后,我们也算是完整的回答了前言部分所提的问题

移动设备的HTML页面中图片实现滚动加载

如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时,要把页面加载完毕,可能就需要10s,20s甚至更多,严重影响用户的体验.针对这样的问题,让页面中的图片滚动加载(图片出现在显示器屏幕上时再加载图片)显得非常重要!这样也可以有效地节省我们服务器的带宽和解决请求大并发的问题. 1.效果图.     这是加载过程中的图片菊花显示