PHP判断图片是否存在和jquery中load事件对图片的处理

浏览数：27 / 时间：2015年06月09日

在公司的图片服务器中,同一个产品一般会存在对应的大图和缩略图.因此,我们在开发手机端的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>