前端跨域及图片延迟加载

>  前端跨域
前端常见跨域解决方案- http://www.igeekbar.com/igeekbar/post/491.htm
  跨域JSONP 的理念就是,我和服务端约定好一个函数名,当我请求文件的时候,服务端返回一段 JavaScript。这段 JavaScript 调用了我们约定好的函数,并且将数据当做参数传入。非常巧合的一点(其实并不是),JSON 的数据格式和 JavaScript 语言里对象的格式正好相同。所以在我们约定的函数里面可以直接使用这个对象。

-- 前端跨域解决方案:
1、通过jsonp跨域
2、document.domain + iframe跨域
3、location.hash + iframe
4、window.name + iframe跨域
5、postMessage跨域
6、跨域资源共享(CORS)
7、nginx代理跨域
8、nodejs中间件代理跨域
9、WebSocket协议跨域

-- 如何解决跨域问题:
1.JSONP 
 JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。关于jsonp的使用方式,可以参考http://blog.csdn.net/alen1985/article/details/6365394,优缺点可以参考http://blog.csdn.net/z69183787/article/details/19191385  
2.添加响应头,允许跨域 
 addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问 
 addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式
3.代理的方式 
 服务器A的test01.html页面想访问服务器B的后台action,返回“test”字符串,此时就出现跨域请求,浏览器控制台会出现报错提示,由于跨域是浏览器的同源策略造成的,对于服务器后台不存在该问题,可以在服务器A中添加一个代理action,在该action中完成对服务器B中action数据的请求,然后在返回到test01.html页面。

-- 跨域访问(跨域AJAX请求的解决方案)- http://blog.csdn.net/it_man/article/details/26338555
 第一个解决方案需要根域名是相同的,例如 a .domain.com 和 b .domain.com 。
 第二个解决方案就是在服务器端通过WebClient(或者其他)的类来请求跨域的内容,这里需要注意的一点是,如果你要将cookies信息也包 含在WebClient的请求中的话,你需要手动的去将Cookies信息加到WebClient中去。
 第三个解决方案就和我们下面需要说道的JSONP有关的。
JSONP全称是“JSON with padding”,它正是利用了script标签可以跨域请求的特性。简单来说JSONP就是在客户端将要用来处理请求结果的函数名作为参数传递给服务器端,然服务器端将请求结果数据作为参数包装在这个函数中 并返回给客户端执行。
 第四:Image,Script,LINK这些标签。

> 图片预加载、延迟加载
html+JS实现图片预加载- http://www.cnblogs.com/jiekk/p/5687720.html  
[前端]图片预加载方法- http://www.cnblogs.com/haoyijing/p/5818236.html
利用CSS、JavaScript及Ajax实现图片预加载的三大方法- http://www.csdn.net/article/2013-10-15/2817187-3-ways-preload-images-css-javascript-ajax

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值