崔文远 Troy Cui 老崔先生的上海生活、技术博客

当网页图片不存在时不显示叉叉,显示默认图片的方法,管用的很!

有时候管理系统里面的产品图片没上传,或者因为网络原因传输过程中断了,图片没显示出来,就会显示一个叉叉,并且图片的占位符也不起作用了。昨晚上花了1个小时搜索、调试,验证了几种网络上的方法,最终有2种方法的确有效,鉴于代码优美的需要,我选择了如下一种。

前台

<img src="<%#Eval("ItemPhoto").ToString() == "" ? "/UploadFiles/ItemCode/nophoto.png" : Eval("ItemPhoto").ToString().Replace("original","middle")%>" alt="<%#Eval("ItemCode")%>" class="img-responsive center-block">

js代码

$(document).ready(function () {
    $('.card img').each(function () {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            this.src = '/UploadFiles/ItemCode/nophoto.png';
            this.onerror = null;//控制不要一直跳动
        }
    });
});


另一种,需要在img里面增加onerror的调用,我比较嫌麻烦。

前台

<img src="<%#Eval("ItemPhoto").ToString() == "" ? "/UploadFiles/ItemCode/nophoto.png" : Eval("ItemPhoto").ToString().Replace("original","middle")%>" alt="<%#Eval("ItemCode")%>" class="img-responsive center-block" onerror="nophoto()">

js代码

function nophoto() {
    var img = event.srcElement;
    img.src = "/UploadFiles/ItemCode/nophoto.png";
    img.onerror = null; //控制不要一直跳动
}

这两种方法都使用到了img的onerror属性,这里也对html5的img充一下电:

Tags:

发布: cuiwenyuan 分类: Web技术 评论: 0 浏览: 27
留言列表
发表留言
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。