PHP判断图片是否存在和jquery中load事件对图片的处理
在公司的图片服务器中,同一个产品一般会存在对应的大图和缩略图.因此,我们在开发手机端的web网站时,默认使用的是产品图片的缩略图,查询数据库时获取的是缩略图的路径.但是,不知什么原因,时不时的,测试的同事总会找到我们,说产品图片没显示出来,是个bug,需要修改.
那么,问题来了.
(1)PHP后台如何判断远程服务器上的图片是否存在
解决思路:获取图片路径-->对图片是否存在进行判断-->不存在,使用大图
/** * @desc 检查远程图片是否存在 * @param string $url 图片远程地址 * @return boolean $found 存在为true,否则false */ function check_remote_file_exists($url) { //curl初始化 $curl = curl_init($url); //不取回数据 curl_setopt($curl, CURLOPT_NOBODY, true); //发送请求,接收结果 $result = curl_exec($curl); $found = false; if ($result !== false) { //检查http响应码是否为200 $statusCode = curl_getinfo($curl, CURLINFO_HTTP_CODE); if ($statusCode == 200) { $found = true; } } //关闭curl资源 curl_close($curl); //返回结果 return $found; } $url='http://home.baidu.com/resource/r/home/img/logo-yy.gif'; $error_url='http://home.baidu.com/resource/r/home/img/logo-yy111111.gif'; var_dump(check_remote_file_exists($url)); echo '<br />'; var_dump(check_remote_file_exists($error_url)); /* 以上例子输出: bool(true) bool(false) */
可以看出,PHP中CURL系列函数还是很强大的.
在百度时,我还发现了说使用fopen()函数进行判断的,但是经实验,未能实现相应功能.举例如下:
1 $url='http://home.baidu.com/resource/r/home/img/logo-yy.gif'; 2 $error_url='http://home.baidu.com/resource/r/home/img/logo-yy111111.gif'; 3 4 if( @fopen( $error_url, 'r' ) ) 5 { 6 echo 'File Exits'; 7 } 8 else 9 { 10 echo 'File Do Not Exits'; 11 } 12 /* 13 以上例子输出:File Exits 14 */
(2)前端jquery中使用load事件对图片的处理
进一步思考,前端使用jquery能否判断远程图片是否存在呢?遗憾的是,在写作本文时,未能找到判断的方法.
我们知道,如果一张图片不存在的话,img标签会默认显示一个撕裂的小图案,客户体验非常不友好,我们可以使用jquery中的load事件(图片加载完时触发)对图片进行处理.
思路:先将全部图片隐藏-->为img标签添加load事件-->图片加载完成,显示图片
示例如下:
注意:引入jquery.js
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>load event</title> 6 <script language="javascript" src="jquery.js"></script> 7 </head> 8 <body> 9 <img src="http://home.baidu.com/resource/r/home/img/logo-yy.gif" alt="" id='test'/> 10 </body> 11 <script> 12 //jquery load event test 13 //var h=$('#test').height(); 14 //document.write(h); 15 $('img').each(function(){ 16 //先隐藏图片 17 $(this).hide(); 18 //监听load事件 19 $(this).bind('load',function(){ 20 //加载完成,显示图片 21 $(this).show(); 22 }); 23 }); 24 </script> 25 </html>
使用load事件时,有两点需要注意:
第一,load事件和当前jquery代码执行顺序是异步的,
第二,$(document).ready()指的是html代码加载完成,load事件指的是请求的图片下载完成.
如果img标签没被设定width和height,默认没加载完成时img的宽高为0,即width=height=0,利用这个特性,我们可以对img标签进行进一步的处理,例如:
