前言
前段时间看到一个国外的网站,在线生成ajax loading动画。觉得很实用,于是动起了移植到自己网站的念头(一直以来的习惯,看到好的工具总想着移植到本地好好研究)。根据以往移植的经验最终把 这个工具移植到自己网站上了,生成图片的核心还是用了原来网站的接口,所以这个功能的实现完全依赖于原网站,生成和下载图片的速度取决于网速,由于是国外 的网站,功能并不稳定。下面介绍下我移植的过程已经遇到的问题。
1.把原网站的代码本地化
这一步比较简单,不过有点麻烦,相关的图片,css,js,html文件保存在本地。
2.实现生成图片的功能
这里遇到了第一个问题,网站生成的图片保存在根据颜色值生成的途径上,而这些图片有防盗链设置,不 允许外来网站引用。尝试过写程序把网站上的所有图片按原目录下载到本地,但是图片太多,放弃了这个思路。
最后采取的办法是通过伪造来源访问原网站的图片,获取图片数据,并直接输出在页面。
下面是实现的代码
- $file=$_REQUEST['file'];
- $url = ’http://www.ajaxload.info/’.$file;
- $ch = curl_init();
- curl_setopt($ch, CURLOPT_URL, $url);
- curl_setopt ($ch, CURLOPT_HEADER,0);
- curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
- curl_setopt ($ch, CURLOPT_REFERER, “http://www.ajaxload.info”);
- curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
- $chData = curl_exec($ch);
- if (curl_errno($ch)) {
- echo ’Curl error: ’ . curl_error($ch);
- }
- curl_close($ch);
- header(“Content-type:image/gif”);
- echo $chData;
注:本人的网站基于BAE建设,与其他服务器的伪造来源有些区别
其他服务器需把
- curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
替换成
- curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 0);
把上述代码保存为ajaxload.php文件用下面的代码
- var url = ’http://bloglaotou.duapp.com/ajaxloader.php?file=cache/’+c1+’/'+c2+’/'+c3+’/'+c4+’/'+c5+’/'+c6+’/'+$$(‘type’).value+’-'+trans+’.gif’;
注:http://bloglaotou.duapp.com替换成你自己的ajaxloader.php文件的地址。
替换原网站script.js文件中的
- var url = ’cache/’+c1+’/'+c2+’/'+c3+’/'+c4+’/'+c5+’/'+c6+’/'+$(‘type’).value+’-'+trans+’.gif’;
3.下载图片的实现
同样的原因,原网站的下载功能移植到本地后也不能用了,实现的方法与生成图片的方法类似
代码如下
- if(isset($_GET[url])){
- $file=$_GET[url];//获取参数
- header(“Content-Type: application/force-download”);
- header(“Content-Disposition: attachment; filename=ajax-loading.gif”);//$downname是下载后的文件名
- $file=$_REQUEST['url'];
- $url = ’http://www.ajaxload.info/’.$file;
- $ch = curl_init();
- curl_setopt($ch, CURLOPT_URL, $url);
- curl_setopt ($ch, CURLOPT_HEADER,0);
- curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
- curl_setopt ($ch, CURLOPT_REFERER, “http://www.ajaxload.info”);
- curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
- $chData = curl_exec($ch);
- if (curl_errno($ch)) {
- echo ’Curl error: ’ . curl_error($ch);
- }
- curl_close($ch);
- echo $chData;
- exit;//结束程序
- }
把上面的代码保存为download.php并把原网站script.js文件中的
- if(!$(‘downloadit’)) domEl(‘a’,'Download it’,[['id','downloadit'],['href','download.php?img='+url]],$(‘previewinner’));
替换为
- if(!$(‘downloadit’)) domEl(‘a’,'下载’,[['id','downloadit'],['href','http://bloglaotou.duapp.com/download.php?url='+path]],$(‘previewinner’));
注:http://bloglaotou.duapp.com替换成你自己的ajaxloader.php文件的地址。
效果预览
该功能已经集成到网站的小工具里,点这里查看
相关推荐
Echarts通过Ajax实现动态数据加载,Echarts通过Ajax实现动态数据加载。
在实际应用中我们经常会用到树,无论是用javascript实现还是用TreeView等控件,都能很好的...为了解决这个问题,我曾经在项目里利用Ajax来动态加载节点,即开始只显示必要的节点,当用户展开树的时候再加载对应的节点......
能根据xml数据的内容生成整棵树 能动态添加、插入、删除节点 能自定义树的样式以及节点的样式 能够以Ajax方式动态加载节点 为树形目录的所有节点定义单击事件
这是一个对于ajax来说很好的代码,建议大家看看
ajax,servlet动态加载dtree
利用Ajax实现树的动态加载(包含基本实现代码)。
NULL 博文链接:https://rody.iteye.com/blog/545189
php+ajax加载数据转圈动画图片.zip
一个jsp 和一个servlet 教你看懂ajax的动态加载过程
瀑布流动态加载的原理:加载触发主要是通过js实现的。在页面的某个地方设置一个标记,当页面滚动到这个标记的位置时,触发加载。
主要介绍了Echarts教程之通过Ajax实现动态加载折线图的方法,需要的朋友可以参考下
WEB开发中经常会用到AJAX来进行异步操作 通常在网络状况差的情况下 可能你的一个操作会有延迟 而客户端如果没有接受到提示可能会导致多次发送 如果你使用了jQuery,那么你可以使用这里提供的loading.js 只要引入到...
ajax五种加载动画进度条特效,无论是学习还是项目总有一款你会用到。
php+ajax实现图片动态分批加载,支持分页
Jquery插件小集合(ajax 投票 AJAX动态加载广告)
* 能够以Ajax方式动态加载节点 * 为树形目录的所有节点定义单击事件 不支持的功能 * 节点的拖拽操作 * 含有复选按钮的节点 * 目录节点的单击事件是统一定义的,不能为个别节点定义不同的单击事件 与其他树形目录...
很牛的带Ajax功能的ASP.NET+C#代码生成工具,能生成从表示层到SQL脚本的所有代码,只需使用VS2008+SQL2005(无需编码,生成后将代码加入我提供的框架就成一个项目,编译后即可使用)生成前需将数据库按要求设计好,...
基于jquery.masonry插件开发的瀑布流ajax动态加载数据功能(使用的是aspx的页面)
提供了完整的echarts图表通过ajax的方式获取数据。做此记录,以供参考学习。里面有两种方式,大同小异。