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

    eclipse的自动提示功能确实十分好用,但是只是笼统的都勾上了,所有会有好多重复项,看着很眼疼. 今天就稍微研究了下,略微知道了几个类型的作用: 序号 类型 大体的中文意思 作用 1 Java Ty ...

  2. 简单的javascript实例一(时钟特效)

    方便以后copy 时钟特效 <html> <head> <meta http-equiv="Content-Type" content="t ...

  3. sql远程连接卡死解决方法

    快捷键Win+R   输入CMD 回车  输入 netsh winsock reset 然后重启电脑  问题解决OK

  4. 表现层技术以及Freemaker使用教程

    表现出计数以及Freemaker详解 在java领域,表现层技术主要有三种:jsp.freemarker.velocity.jsp是大家最熟悉的技术优点: 1.功能强大,可以写java代码 2.支持j ...

  5. "Classifying plankton with deep neural networks" notes

    cross entropy loss is not quite the same as optimizing classification accuracy. Althougth the two ar ...

  6. python基础：映射和集合类型

    python字典的迭代器遍历 字典有一个方法可以返回该字典的迭代器,这个方法就是: dict. iteritems() 当在字典中增加或者删除字典entry的时候,迭代器会失效的,类似于C++的stl ...

  7. Django模板-模板标签

    接着Django模板-基础知识继续写模板相关知识. if标签 {% if %} 标签接受 and , or 或者 not 关键字来对多个变量做判断 ,或者对变量取反( not ). 但是不允许在同一个 ...

  8. 上传python包到PyPI

    一.前言 由于项目需要将API响应的XML内容解析成python对象,写了一个简单的xml转python的库,因为功能简单,细节处理也不好,文档也没有,没想也不好意思上传到pypi. 后来由于多个不同 ...

  9. HTTP协议漫谈(转)

    转自:http://www.cnblogs.com/CareySon/archive/2012/04/27/HTTP-Protocol.html HTTP的定义和历史 在一个网络中.传输数据需要面临三 ...

  10. js返回当前时间的毫秒数

    Date.now(); +new Date(); new Date().getTime();