在公司的图片服务器中,同一个产品一般会存在对应的大图和缩略图.因此,我们在开发手机端的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. js学习日记 （1）createDocumentFragment（） ES6 => 箭头

    只能说是会用和记载,深入理解还需时间. 有关性能优化: 使用createdocumentfragment()方法可以创建某个具有节点该有的所有属性的节点. 使用情况:  提取文档中的某个小部分,修改文 ...

  2. "Classifying plankton with deep neural networks" notes

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

  3. php汉字转Unicode编码函数

    /** * $str 原始字符串 * $encoding 原始字符串的编码,默认GBK * $prefix 编码后的前缀,默认"&#" * $postfix 编码后的后缀, ...

  4. Android 相对布局常用属性

    Android 布局属性详解 RelativeLayout用到的一些重要的属性: 第一类:属性值为true或false     android:layout_centerHrizontal  水平居中 ...

  5. python--getitme\setitem 支持索引与分片

    1.想要自己定义的python对象支持索引与分片操作就要重载__getitem__\__setitem__这两个方法. 2.__getitme__(self,index) 这里的index参数可能类型 ...

  6. CGFloat，CGPoint，CGSize，CGRect

    1.数据类型: CGFloat: 浮点值的基本类型 CGPoint: 表示一个二维坐标系中的点 CGSize: 表示一个矩形的宽度和高度 CGRect: 表示一个矩形的位置和大小 typedef fl ...

  7. 每天一道题：LeetCode

    本人是研二程旭猿一枚,还有半年多就要找工作了,想想上一年度面试阿里的算法工程师挂了,心有不甘啊,主要还是准备不足,对一些常见的算法问题没有去组织准备,为了明年找一份好的实习,就从现在开始,好好准备吧, ...

  8. VS2013启动项目调试的时候会启动本地IIS

    VS2013启动项目调试的时候会启动本地IIS ,而在这种状态下去调试程序,会有很多功能用不了,而且还会有错误:如下图: 解决方法,将托管管道模式更改一下就行了:

  9. #include <iomanip>

    1 setfill 2 setprecision 3 setw 1 setfill setfill( 'c' ) 设填充字符为c ▲setfill(char c) 用法 : 就是在预设宽度中如果已存在 ...

  10. Yii的场景

    先上代码 class User extends CActiveRecord{    public function rules()    {        return array(          ...