在公司的图片服务器中,同一个产品一般会存在对应的大图和缩略图.因此,我们在开发手机端的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. 观察者模式：猫叫鼠跑人醒(C#)

    本着菜鸟先飞的想法,决定把平时遇到的知识点记录下来,一来是加深理解,二来是方便以后自己查阅.当您看到我这篇文章的时候,觉得代码有哪里不足的地方,请多指教,谢谢.(命名不规范是为了加深自己的理解,多多见 ...

  2. C#1 输入输出 常量变量

    C#  输入输出  常量变量 //输出 Console.WriteLine("这是一行文字"); 自动回车的. Console.Write("Hello world&qu ...

  3. SSR服务端一键安装脚本

    支持新协议混淆,SSR服务端一键安装脚本   Shadowsocks-R 是项目 shadowsocks 的增强版,用于方便地产生各种协议接口.实现为在原来的协议外套一层编码和解码接口,不但可以伪装成 ...

  4. hdu1004Let the Balloon Rise

    Problem Description Contest time again! How excited it is to see balloons floating around. But to te ...

  5. com.sun.jdi.InvocationException occurred invoking method.

    文章来源于网络, 自己也遇到同样的问题,也是采用这样的方式解决的.原文链接http://zuiyanwangyue.iteye.com/blog/470638 在 HibernateDaoSuppor ...

  6. 自定义alert，confirm，prompt事件，模仿window.alert()，confirm()，prompt()

    css代码: /*custom_alert and custom_confirm*/ ; } ;;background-color: #585858; padding: 30px 30px; bord ...

  7. PHP文件访问技术

    <?php $file=fopen("test.txt","r"); //以只读方式打开test.txt $char=fgetc($file); echo ...

  8. 正则表达式之match与exec【转的 楼兰之风】

    彻底领悟javascript中的exec与match方法 阅读本文之前,请先看下面一道题: 题目17:Read the following javascript code: var someText= ...

  9. linux如何ARP嗅探 Linux下嗅探工具Dsniff安装记录

      先来下载依赖包 和一些必须要用到的工具 我这里用的是 dsniff-2.3 的版本 wget http://www.monkey.org/~dugsong/dsniff/dsniff-2.3.ta ...

  10. android从网络获取图片

    http://blog.csdn.net/wangjinyu501/article/details/8219317 http://www.cnblogs.com/JerryWang1991/archi ...