jquery图片延迟加载 及 serializeArray、serialize用法记录
1.使用jquery实现 图片延迟加载
由于用户访问页面需要加载很多的图片,延迟加载技术在电子商务网站领域越来越普及,淘宝商城,京东商城,凡客等访问量巨大的电子商务站点为了增加用户用户体验,访问速度以及减少对自身服务器的压力,纷纷研发或使用延迟加载技术。当然如果没有前端开发的深入研究很难写出自己的js特效包。
jquery.lazyload.js就是一个基于jquery框架库的特效应用。它能让用户访问页面的时候,只加载当前屏幕所见内容的图片。
jquery.lazyload.js使用方法:首先页面需导入jquery.js。这个是先决条件,毕竟jquery.lazyload.js特效包是基于jquery框架库的!然后需到如Jquery.Lazyload.js。还需在本地服务器上传一张用来占位的图片grey.gif(可以是张很小的图片或者loading.gif之类表示正在加载的图片)。
<script type="text/javascript" src="http://www.wumeiwang.com/js/lazyload/jquery.js"></script>
<script type="text/javascript" src="http://www.wumeiwang.com/js
/jquery.lazyload.js"></script>
<script type="text/javascript" src="http://pic.imtimmy.com/wp-content/js/lazyload/jquery.lazyload.js"></script> <script type="text/javascript"> jQuery(document).ready( function($){ $("img").lazyload({placeholder : http:///images/common/grey.gif,effect : "fadeIn" }); }); </script>
View Code
但是如果使用httpwatch等网页测试工具检测页面加载你会发现,图片其实是全部加载完了。因为执行js是在页面的page_load之后。所有,jquery.lazyload.js加载出来的只是图片的缓存文件。这样不就2次访问服务器加载图片了?即使jquery.lazyload.js加载的只是缓存图片...
解决办法:在jquery.lazyload.js的62行将 $(self).attr("original", $(self).attr("img")); 修改成 $(self).attr("original", $(self).attr("original")); 然后读图图片的时候将img= 替换成 original=即可。凡客,淘宝商城都是这样的作法。这样才实现真正意义上的延迟加载。
2.serializeArray、serialize用法
使用这两个函数 注意 form里边的 input必须要有name属性 否则无法序列化
表单参数序列化提交
如果没有借助jQuery,表单可以直接提交,这样带来两个问题就是安全(get提交)或表单参数验证障碍,嗯~,可能很难懂,这样吧,我先放张图,这图是原生get提交的->
这下清楚了吧,所有的参数都在浏览器里面显示,稍稍别有用心的人就能轻易利用,这是其一;
如果是post提交,可能没有以上这个问题,但是。。。,如果参数值提交前需要在js中做处理(表单参数验证或参数拼接等等),这样直接把数据扔给后台的童鞋,肯定不太好~
额,还可以借助前两章中的方法。。。可能会累死啊~,毕竟每一个表单都要单独取值。。。总之,这样麻烦;哈哈~ヽ(●´ω`●)ノ,既然麻烦,jQuery给我们提供了两个好用的方法serializeArray()和serialize()
前者可以将表单的参数值序列化成一个Array的形式(用于post提交),后者会将表单参数值序列化成键值字符串的形式(用于get提交),二话不说,先放出源码以及效果图-->
function submitForm(val){if(1==val){//serializeArrayvar serializeArray=$("#forms").serializeArray();console.log("serializeArray:");console.log(serializeArray);for(var i in serializeArray){}}else{var serialize=$("#forms").serialize();console.log("serialize:");console.log(serialize);}}
View Code
后者已经比较完美了,可以直接拼接到提交路径后面就好了,但~对于前者,这个serializeArray只是帮忙做了一部分,如果是post提交应该是{key1:value1,key2:value2}的形式,此时即使对于菜鸟也很容易写一个通用的方法处理成对象键值对的形式,在此就贡献一个吧
额,嗯~,其实有两个小问题,如果表单有一项没有填的话参数会不存在,还有一个问题是 多选框永远只会序列化第一个值,切记 切记。。。
哦~~~,还存在一个问题是,如果表单外层的form标签若不存在,则不能序列化参数,如果table标签里面嵌一个form的也不能,至于这个原因 个人猜想可能是与html规范冲突吧~,这个是我在实际开发中碰到的问题,希望各位不要踩坑啊!
两篇文章转载出处如下:
http://www.cnblogs.com/198933ABC/archive/2011/02/13/1953147.html
http://www.cnblogs.com/funnyzpc/p/7571998.html
良心转载!!!
转载于:https://www.cnblogs.com/weitaming/p/7645619.html
jquery图片延迟加载 及 serializeArray、serialize用法记录相关推荐
- jQuery图片延迟加载插件jQuery.lazyload
查看演示 website 立即下载 插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方 ...
- jquery图片延迟加载 lazy-src
http://tanglangrong2010.blog.163.com/blog/static/174796716201211282555345/ 目前,主要的购物网站都采用了这种加载方式.今天在一 ...
- jquery插件实现图片延迟加载
在页面中图片较多时,一次性加载所有图片会耗去很多时间. 我们可以选择"延迟加载"的方式来加载图片,相对这种页面的加载速度将会有个很大的提升. 图片延迟加载的原理很简单,依据用户正浏 ...
- 使用jquery插件实现图片延迟加载技术
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
- JQuery LazyLoad实现图片延迟加载-探究
对于大量图片的网站,图片延迟加载是提高速度和性能的好方法. 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片).大体常用的 ...
- jquery.lazyload 插件实现图片延迟加载
jquery.lazyload 插件实现图片延迟加载 看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用 JQuery. ...
- Python读取显示raw图片+numpy基本用法记录
这次任务是拿到了几张raw图片,没其他头文件或信息,需要对raw图片使用python打开并显示 (作为了一个初学者,整天搞jpg.png,突然来了个raw,表示很头大) 1.获取raw图片shape信 ...
- 利用Jquery Lazyload JS插件实现网页图片延迟加载
Jquery Lazyload是一款网页图片延迟加载JS插件,本文介绍该JS的使用方法. 最新的jquery lazyload可以单独使用(即不依赖jquery),本文介绍的是依赖jquery的使用及 ...
- php获取序列化表单,jQuery 序列化表单数据 serialize() serializeArray()
jQuery 序列化表单数据 serialize() serializeArray() 格式:var data = $("form").serialize(); 功能:将表单内容序 ...
- serializeArray(),serialize(),param()用法
理论:form表单提交参数,当form表单内容比较多的情况下ajax提交不需要一个一个拼接参数,可以用serializeArray(),serialize(),这来那个方法序列化,,序列化后参数的 ...
最新文章
- LeetCode 116. 填充每个节点的下一个右侧节点指针
- python书籍_Python 之父宣布加盟微软!包邮送几本 Python 书籍压压惊!
- Python应用实战系列(一)-正则表达式大全
- git 查看、创建、删除 本地,远程 分支
- 圈圈usb cannot convert from 'BOOL (__thiscall CMyUsbHidTestAppDlg::* )(UINT,DWORD)' to 'LRESULT (__
- shang*biao
- PPT模板,背景图片,等等(千图网大礼包)
- python中正则表达式的简单应用_Python正则表达式详细应用
- 可爱的图,送给可爱的人们
- 群晖NAS 7.X版搭建博客网站,并内网穿透发布公网可访问 4-8
- Ez-USB FX3开发板的使用
- 【错误记录】Gradle 配置 productFlavors 报错 ( All flavors must now belong to a named flavor dimension. )
- 简单交错序列前N项和
- MIPS系统网络的配置
- 用Bootstrap实现搜索select下拉框:bootstrap-select
- 墨尔本python培训班_墨尔本大学商业专业
- 软考中级软件设计师---知识产权(自用)
- NixOS 安装教程
- 【异常】SSL 接收到一个超出最大准许长度的记录。
- 【Centos自动校准时间】