在公司的图片服务器中,同一个产品一般会存在对应的大图和缩略图.因此,我们在开发手机端的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标签进行进一步的处理,例如:
http://www.cnblogs.com/kinger/p/4292412.html
时间： 2024-10-06 09:19:45