jQuery - 处理图片无法显示问题

　　很多时候图片路径读取的不对，导致图片无法显示，留下一大段空白的占位符。很是难看，今天我用 jQuery 的 error()超级传送门 函数实现一个 处理图片无法显示的问题。

  

      这样的效果肯定不是我们想要的～～

 

      

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <!-- html 代码 -->
        <img src="../../img/07/googlelogo_1.jpg" width="468" height="134" alt=""/>
        <script src="../../js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
        
        <script type="text/javascript">
            $(function(){
                 // 当图片无法显示时,使用一个占位符图片进行替换
                $('img').error(function(){
                    $(this).attr("src","../../img/07/noexistspic.jpg");
                });
            });
        </script>
    </body>
</html>

 

最终实现的效果如下: 

 

很简单吧～快来试试吧！！！

 

posted @ 2016-06-15 09:38  温柔的敲敲敲  阅读(823)  评论(0)    收藏  举报