JavaScript实现图片容错处理

javascript|容错

  前阵子给人做一个产品展示页面,需要放置大量的本地或外来图片,由于旧的数据中有一些无效的图片路径,导致网页迟迟不能载入,写了大段的JS代码去验证图片路径的有效性,但由于外部图片有可能会因为服务器、网络等原因,仍然有可能打不开而导致页面半天才能全部载入,因此需要对图片做一下容错处理:<img src="图片路径" onerror="this.src='error.gif'" border="0" align="absmiddle">,这样一来,如果图片不能正常载入,则会自动显示error.gif,省得留着一个大大的XX在那!

  代码内容: var strImageUrl=document.form1.info_img.value;
if(strImageUrl.length>0)
{
    var RegExpImageUrl = strImageUrl.match(/^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/);
    var ImageType = strImageUrl.substr(strImageUrl.length-4,4).toLowerCase();
    if(RegExpImageUrl == null)
    {
        alert("Error:图片地址格式不对");
        document.form1.info_img.focus();
        return false;
    }
    if((ImageType != ".jpg") && (ImageType != ".gif") && (ImageType != ".bmp") && (ImageType != ".png"))
    {
        alert("Error:您的地址链接到的不是一个图片吧?!");
        document.form1.info_img.focus();
        return false;
    }
}

时间: 2024-11-02 11:43:12

JavaScript实现图片容错处理的相关文章

javascript实现图片跟随鼠标移动效果的方法

  本文实例讲述了javascript实现图片跟随鼠标移动效果的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="

JavaScript实现图片DIV竖向滑动的方法

  JavaScript实现图片DIV竖向滑动的方法           这篇文章主要介绍了JavaScript实现图片DIV竖向滑动的方法,涉及javascript操作div层的相关技巧,需要的朋友可以参考下 本文实例讲述了JavaScript实现图片DIV竖向滑动的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

原生javascript实现图片滚动、延时加载功能

 这篇文章主要介绍了使用原生javascript实现图片滚动.延时加载功能,思路与方法均分享给大家,希望对大家能有所帮助.     实现效果:下拉滚动条时,图片出现在可见区域时,才开始加载 思路: (1)img标签,把真实的图片地址,放在自己设置的属性里面,如 lazy-src (2)获取img离页面的高度(在JQ里是offset().top),原生是: img.getBoundingClientRect().top + document.body.scrollTop||document.doc

原生javascript实现图片按钮切换

 这篇文章主要介绍了原生javascript实现图片按钮切换,需要的朋友可以参考下     先给大家看下效果展示图 以下为详细代码:   代码如下: function LGY_picSwitch(option){ this.oWrap = this.getId(option.wrapID); //最外层元素 this.olistWrap = this.getNodeByClassname(this.oWrap,'gy_picSwitch_listWrap')[0]; this.oUl = thi

原生javascript实现图片弹窗交互效果

 这篇文章主要介绍了原生javascript实现图片弹窗交互效果的方法及的相关资料,需要的朋友可以参考下     [一]用var 声明多个变量,比每个变量都用var快多了   代码如下: var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop, sWindow_h = document.documentElement.clientHeight, t_h = parseInt(this.getCs

JavaScript控制图片加载完成后调用回调函数的方法

 这篇文章主要介绍了JavaScript控制图片加载完成后调用回调函数的方法,实例分析了javascript回调函数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JavaScript控制图片加载完成后调用回调函数的方法.分享给大家供大家参考.具体分析如下: 这段代码可以控制指定区域内的图片加载完成后执行指定的回调函数. 代码如下: function when_images_loaded($img_container, callback) { /* do callb

javascript实现图片相似度算法

 这篇文章主要介绍了javascript实现图片相似度算法,大家参考使用吧 代码如下: function getHistogram(imageData) {     var arr = [];     for (var i = 0; i < 64; i++) {         arr[i] = 0;     }     var data = imageData.data;     var pow4 = Math.pow(4, 2);     for (var i = 0, len = data

Javascript检查图片大小不要让大图片撑破页面

 如何用Javascript判断图片大小,其实只要写一个简单的函数就可以了,当然这么判断要怎么写很多人可能不知道.发觉用 ASP 判断图片大小比数牛毛还繁复, 且判断了就判断了, 还要逻辑显示...烦. 用 Javascript 判断, 轻松搞定, 最终效果无非就是不要让大图片撑破页面.   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 3

JavaScript控制图片360度旋转代码_javascript技巧

JavaScript控制图片360度旋转代码 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]