在公司的图片服务器中,同一个产品一般会存在对应的大图和缩略图.因此,我们在开发手机端的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. STL_函数模板

    #include <iostream>#include <string>using namespace std; #define MAX(T) \ T max_##T (T x ...

  2. 使用PowerShell管理Windows8应用

    引子(?): 我从消费者预览版开始使用的win8,大概是因为我年龄不大的缘故,我很快熟悉了这个操作系统并习惯了使用windows8的Modern App.我之前使用过一个叫Windows8 Moder ...

  3. XML_PULL解析

    一.在Android应用中的XML文件来源 1.本地xml文件     本地XML文件可以放在应用根目录assets文件夹.res/xml.res/raw.SDcard卡.应用的data目录等: 除r ...

  4. python运维开发(六)----模块续

    内容目录 反射 模块 os模块 sys模块 md5加密模块 re正则匹配模块 configparse模块 xml模块 shutil模块 subprocess模块 反射 利用字符串的形式去对象(模块)中 ...

  5. 初学swift笔记－数组、字典、元组（三）

    数组的使用.字典的使用.元组的使用 import Foundation //1.定义数组 //集合数据 数组.字典 ,,,]//常用定义 ,,,]//常用定义 ,,,]//范型定义 ,,,] arr_ ...

  6. 浅谈局域网ARP攻击的危害及防范方法(图)

    浅谈局域网ARP攻击的危害及防范方法(图)   作者:冰盾防火墙 网站:www.bingdun.com 日期:2015-03-03   自 去年5月份开始出现的校内局域网频繁掉线等问题,对正常的教育教 ...

  7. JS中如何使用Cookie

    1.关于JS设置Cookie的说明 在Javascript脚本里,一个cookie 实际就是一个字符串属性.当你读取cookie的值时,就得到一个字符串,里面当前WEB页使用的所有cookies的名称 ...

  8. gulp api

    gulp api 简介 gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成 gulp是基于Nod ...

  9. 网易云课堂_程序设计入门-C语言_第五周：函数_2完数

    2 完数(5分) 题目内容: 一个正整数的因子是所有可以整除它的正整数.而一个数如果恰好等于除它本身外的因子之和,这个数就称为完数.例如6=1+2+3(6的因子是1,2,3). 现在,你要写一个程序, ...

  10. hdu 5591 ZYB's Game

    Problem Description ZYB played a game named NumberBomb with his classmates ,N] in mind,then players ...