jquery流程,jquery流程图

关于jquery.lazyload.js的定义高宽问题

我有个改造lazyload的方案，这需要修改lazyload的源代码，主要是加载到显示的流程的那部分，通过事先获得图片的高宽度在动态的指定img标记的width和height的值。

我只谈理论：

1.当页面加载完之后，首先向document里创建一个display:none隐藏的图片标记，

2.当需要加载显示某图片时，先向创建的那个隐藏标记里放图片，

3.写一个setInterval监听函数不停地监听读取图片的width和height（图片加载完前是读取不到的，所以需要不停地读取，直到能读取到了，说明图片也加载完成了），

4.动态的指定真正要显示的图片标记的width和height值以及src，

注：尽管上面的步骤中看似有两个Img标记，但事实上浏览器只会下载图片一次的，且速度和非改造的速度几乎一样，不会在视觉上有不友好的地方，因为同一个域名下如果有多个地方引用了同一个资源，浏览器会在第一次的时候做缓存，下一个用的地方会直接从本地缓存库里调用，所以没有服务器、带宽和性能损耗。

相关问答

Q1: 怎样使用jquery中的ajax

Java软件开发中，后台中我们可以通过各种框架，像SSH等进行对代码的封装，方便我们对Java代码的编写，例如，Struts,SpringMVC对从前台到action的流程进行封装控制，使我们只需要进行一些简单配置就可以实现；而Spring进行了对各种对象的管理进行封装，提供了AOP编程的方式，大大方便了我们；而Hibernate和IBatis则是对JDBC代码进行封装，不需要我们每次都写那些重复而繁杂的JDBC代码。

前台呢，对于页面一些效果，验证等，我们都是通过JavaScript语言进行完成的，但是它也就像我们的Java代码一样，是最前台语言最基础的，而JQuery则是对js代码进行封装方便我们前台代码的编写，而且它还有一个非常大的优势就是解决了浏览器的兼容问题，这也是我们使用它非常重要的原因之一。

而现在为了满足用户的需求，Ajax（Asynchronous Javascript + XML）异步刷新起到了无可比拟的作用，以前写Ajax操作，总是需要我们想JDBC代码一样进行几个必备的步骤：

AJAX——核心XMLHttpRequest对象，而JQuery也对Ajax异步操作进行了封装，这里看一下几种常用的方式。 $.ajax，$.post， $.get， $.getJSON。

一， $.ajax，这个是JQuery对ajax封装的最基础步，通过使用这个函数可以完成异步通讯的所有功能。也就是说什么情况下我们都可以通过此方法进行异步刷新的操作。但是它的参数较多，有的时候可能会麻烦一些。看一下常用的参数：

var configObj = {

method //数据的提交方式：get和post

url //数据的提交路劲

async //是否支持异步刷新，默认是true

data //需要提交的数据

dataType //服务器返回数据的类型，例如xml,String,Json等

success //请求成功后的回调函数

error //请求失败后的回调函数

}

$.ajax(configObj);//通过$.ajax函数进行调用。

二，$.post，这个函数其实就是对$.ajax进行了更进一步的封装，减少了参数，简化了操作，但是运用的范围更小了。$.post简化了数据提交方式，只能采用POST方式提交。只能是异步访问服务器，不能同步访问，不能进行错误处理。在满足这些情况下，我们可以使用这个函数来方便我们的编程，它的主要几个参数，像method，async等进行了默认设置，我们不可以改变的。例子不再介绍。

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式，xml, html, script, json, text,_default。

三，$.get，和$.post一样，这个函数是对get方法的提交数据进行封装，只能使用在get提交数据解决异步刷新的方式上，使用方式和上边的也差不多。这里不再演示。

四， $.getJSON，这个是进一步的封装，也就是对返回数据类型为Json进行操作。里边就三个参数，需要我们设置，非常简单：url,[data],[callback]。

其实会了$.ajax方法，其它的就都会使用了，都是一样的，其实非常简单。

但是这里还有一个问题，比较麻烦，就是如果页面数据量比较大，该怎么办呢？在常规表单的处理中，我们使用框架Struts2可以通过域驱动模式进行自动获取封装，那么通过ajax,如何进行封装呢？这里JQuery有一个插件，Jquery Form，通过引入此js文件，我们可以模仿表单Form来支持Struts2的域驱动模式，进行自动数据的封装。

这样我们就不用再进行数据data的封装处理，大大简化了我们ajax的操作这样异步刷新的操作。综上为JQuery中ajax的操作，感觉使用多了，和form表单的处理还是非常相似的，只不过实现的功能不一样罢了。学习编程，其实就是学习对数据的流转处理，如何从前台获取，传输到服务器进行相应的处理，然后返回，进行相关的显示，把这个流程通过一些技术实现，就完成了软件的开发，感觉还是非常有意思的。

更多资料请参考

Q2: jquery的图片轮播流程图怎么写

用不用JQuery都行，直接引入Swiper插件就好了，体积小，又省时

link rel="stylesheet" href="path/to/swiper.min.css"

script src="path/to/swiper.min.js"/script

div class="swiper-container"

    div class="swiper-wrapper"

        div class="swiper-slide"图1/div

        div class="swiper-slide"图2/div

        div class="swiper-slide"图3/div

    /div

 /div

script        

  var mySwiper = new Swiper ('.swiper-container');        

/script