在公司的图片服务器中,同一个产品一般会存在对应的大图和缩略图.因此,我们在开发手机端的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()函数进行判断的,但是经实验,未能实现相应功能.举例如下:
 $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';

 if( @fopen( $error_url, 'r' ) )

 {

 echo 'File Exits';

 }

 else

 {

 echo 'File Do Not Exits';

 }

 /*

 以上例子输出:File Exits

 */
(2)前端jquery中使用load事件对图片的处理
进一步思考,前端使用jquery能否判断远程图片是否存在呢?遗憾的是,在写作本文时,未能找到判断的方法.
我们知道,如果一张图片不存在的话,img标签会默认显示一个撕裂的小图案,客户体验非常不友好,我们可以使用jquery中的load事件(图片加载完时触发)对图片进行处理.
思路:先将全部图片隐藏-->为img标签添加load事件-->图片加载完成,显示图片
示例如下:
注意:引入jquery.js
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>load event</title>

 <script language="javascript" src="jquery.js"></script>

 </head>

 <body>

 <img src="http://home.baidu.com/resource/r/home/img/logo-yy.gif" alt="" id='test'/>

 </body>

 <script>

 //jquery load event test

 //var h=$('#test').height();

 //document.write(h);

 $('img').each(function(){

 //先隐藏图片

 $(this).hide();

 //监听load事件

 $(this).bind('load',function(){

 //加载完成,显示图片

 $(this).show();

 });

 });

 </script>

 </html>
使用load事件时,有两点需要注意:
第一,load事件和当前jquery代码执行顺序是异步的,
第二,$(document).ready()指的是html代码加载完成,load事件指的是请求的图片下载完成.
 如果img标签没被设定width和height,默认没加载完成时img的宽高为0,即width=height=0,利用这个特性,我们可以对img标签进行进一步的处理,例如:

PHP判断图片是否存在和jquery中load事件对图片的处理的更多相关文章

  1. jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  2. 【jQuery基础学习】03 jQuery中的事件与动画

    关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...

  3. jQuery：详解jQuery中的事件（二）

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  4. jQuery：详解jQuery中的事件（一）

    之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...

  5. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  6. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  7. Jquery：Jquery中的事件<一>

    由于今天有一个比较重要的面试,所以昨天晚上对以前做的一些项目做了一下总结,直接导致昨天的学习笔记断更了,哎,计划永远赶不上变化啊!今天学习了Jquery中是事件,就此做一个笔记,便于日后复习. 一.加 ...

  8. JQuery中的事件委托

    JQuery 中的事件委托 定义 事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能:其次可以让新元素的子元素也可以拥 ...

  9. jQuery中绑定事件的几种方法

    以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){});  (2)target.bind("click",functi ...

随机推荐

  1. Linux修改Shell命令提示符及颜色

    Linux修改Shell命令提示符及颜色 1. Linux登录过程中加载配置文件顺序: /etc/profile → /etc/profile.d/*.sh → ~/.bash_profile → ~ ...

  2. css样式规则的简要总结

    css与文档关联起来发挥作用. css文件中是各种样式规则,由选择器和声名块构成.声明块由多条声明组成.选择器是声明要作用的对象,声明是对具体规则的描述. 声明由属性和值组成,值或是属性的错误都会使该 ...

  3. jQuery 源码分析和使用心得 - 关于源码

    说到jQuery, 大家可能直觉的认为jQuery的源码应该就是一个jquery.xx.js这样的一个文件. 但是看到真正的源码的时候, 整个人都思密达了.jQuery的源码做的事远比你想象的多, 为 ...

  4. 在ie中用滤镜 (filter:progid:DXImageTransform.Microsoft.gradient)会触发overflow:hidden？

    1.在ie中用滤镜 (filter:progid:DXImageTransform.Microsoft.gradient)会触发overflow:hidden 在项目中做一个背景层透明内容(菜单)不透 ...

  5. Binder的非正常消亡时的重置方法

    一.原理 当Binder非正常消亡的时候,会导致远程调用失败,这样客户端功能就会受到影响. 解决:给Binder设置一个死亡代理,当Binder死亡时,我们就会收到通知,这个时候可以重新发起连接. 二 ...

  6. hdu 5126 stars cdq分治套cdq分治+树状数组

    题目链接 给n个操作, 第一种是在x, y, z这个点+1. 第二种询问(x1, y1, z1). (x2, y2, z2)之间的总值. 用一次cdq分治可以将三维变两维, 两次的话就变成一维了, 然 ...

  7. "创业"半年

                作为一个程序员, 因为受够了”给别人实现梦想太累”的念头, 又受到”外面给出更高薪水”的诱惑, 果断离职创业. 但原本是要创业的, 过了半年, 变成了失业, 这其中到底经历了哪 ...

  8. 用gson 解 json

    1.json 简单介绍 轻量级数据存储传输文件,比xml精简. 2.Gson简单介绍 android中解json方式很多,比较常用json-lib  goole-Gson. json-lib要包含的包 ...

  9. Intellij IDEA开发第一个android应用教程

    用惯eclipse的同学们可以试试通过Intellij IDEA来开发一个android应用.下面是具体的教程. 首先:下载Intellij IDEA.最新版本是12.官方提供两个版本.一个是Comm ...

  10. schema://host[:port#]/path/.../[?query-string][#anchor]

    1:http协议状态200 OK最常见的就是成功响应状态码200了, 这表明该请求被成功地完成,所请求的资源发送回客户端 302 Found重定向,新的URL会在response 中的Location ...