Ajaxload动态加载动画生成工具的实现(ajaxload的本地移植)

前端之家收集整理的这篇文章主要介绍了Ajaxload动态加载动画生成工具的实现(ajaxload的本地移植)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

前段时间看到一个国外的网站,在线生成ajax loading动画。觉得很实用,于是动起了移植到自己网站的念头(一直以来的习惯,看到好的工具总想着移植到本地好好研究)。根据以往移植的经验最终把 这个工具移植到自己网站上了,生成图片的核心还是用了原来网站的接口,所以这个功能的实现完全依赖于原网站,生成和下载图片的速度取决于网速,由于是国外 的网站,功能并不稳定。下面介绍下我移植的过程已经遇到的问题。

1.把原网站的代码本地化

这一步比较简单,不过有点麻烦,相关的图片,css,js,html文件保存在本地。

2.实现生成图片功能

这里遇到了第一个问题,网站生成图片保存在根据颜色值生成的途径上,而这些图片有防盗链设置,不 允许外来网站引用。尝试过写程序把网站上的所有图片按原目录下载到本地,但是图片太多,放弃了这个思路。

最后采取的办法是通过伪造来源访问原网站的图片获取图片数据,并直接输出页面

下面是实现的代码

  1. $file=$_REQUEST['file'];

  2. $url = ’http://www.ajaxload.info/’.$file;

  3. $ch = curl_init();

  4. curl_setopt($ch,CURLOPT_URL,$url);

  5. curl_setopt ($ch,CURLOPT_HEADER,0);

  6. curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);

  7. curl_setopt ($ch,CURLOPT_REFERER,“http://www.ajaxload.info”);

  8. curl_setopt($ch,CURLOPT_FOLLOWLOCATION,1);


  9. $chData = curl_exec($ch);

  10. if (curl_errno($ch)) {

  11. echo ’Curl error: ’ . curl_error($ch);

  12. }


  13. curl_close($ch);

  14. header(“Content-type:image/gif”);

  15. echo$chData;

注:本人的网站基于BAE建设,与其他服务器的伪造来源有些区别

其他服务器需把

  1. curl_setopt($ch,1);

替换成

Highlighter" style="padding:1px 0px 0px;font-family:consolas,0);

把上述代码保存为ajaxload.PHP文件用下面的代码

  1. 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文件中的

  1. var url = ’cache/’+c1+’/'+c2+’/'+c3+’/'+c4+’/'+c5+’/'+c6+’/'+$(‘type’).value+’-'+trans+’.gif’;

3.下载图片的实现

同样的原因,原网站的下载功能移植到本地后也不能用了,实现的方法生成图片方法类似

代码如下

  1. if(isset($_GET[url])){


  2. $file=$_GET[url];//获取参数

  3. header(“Content-Type: application/force-download”);

  4. header(“Content-Disposition: attachment; filename=ajax-loading.gif”);//$downname是下载后的文件

  5. $file=$_REQUEST['url'];

  6. $url = ’http://www.ajaxload.info/’.$file;

  7. $ch = curl_init();

  8. curl_setopt($ch,$url);

  9. curl_setopt ($ch,0);

  10. curl_setopt($ch,1);

  11. curl_setopt ($ch,“http://www.ajaxload.info”);

  12. curl_setopt($ch,1);


  13. $chData = curl_exec($ch);

  14. if (curl_errno($ch)) {

  15. echo ’Curl error: ’ . curl_error($ch);

  16. }


  17. curl_close($ch);

  18. echo$chData;

  19. exit;//结束程序

  20. }

把上面的代码保存为download.PHP并把原网站script.js文件中的

  1. if(!$(‘downloadit’)) domEl(‘a’,'Download it’,[['id','downloadit'],['href','download.PHP?img='+url]],$(‘previewinner’));

替换为

Highlighter" style="padding:1px 0px 0px;font-family:consolas,'下载’,'http://bloglaotou.duapp.com/download.PHP?url='+path]],$(‘previewinner’));

注:http://bloglaotou.duapp.com替换成你自己的ajaxloader.PHP文件的地址。

效果预览

查看示例

功能已经集成到网站的小工具里,点这里查看

下载地址

猜你在找的Ajax相关文章