使用javascript检测损坏的图像不起作用

Question

I have tried many of the solutions using javascript to detect broken images but it doesn't seem to work. 我已经尝试过使用javascript来检测损坏的图像的许多解决方案，但是它似乎不起作用。 Any idea what I'm doing wrong? 知道我在做什么错吗？

Select 'jquery' from the dropdown box here to see the broken images:- 从此处的下拉框中选择“ jquery”以查看损坏的图像：-

http://www.api.jonathanlyon.com/getpocket/view.html http://www.api.jonathanlyon.com/getpocket/view.html

The code for the site is here:- 该站点的代码在这里：

    <!doctype html>
<html>
<head>
    <meta charset=utf-8>
    <title>Insights Lab</title>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>  
    <style>
    ul li { color: red;}
    .emphasis { color: green;}
    .code {color: #3387B5}
    body { font-family: 'Roboto Condensed', sans-serif; }
p { font-size: 14px; color:#999; }
h2 { font-size: 18px; 
color:#666;
}
.view {
  bottom: 10;
  height: 16px;
  position: absolute;
}
    #art {
      position: relative;
    width:220px;
    border: 1px solid #999;
    float:left;
    margin-right:10px;
    padding:5px;
    height:300px;
    margin-bottom:8px;
    background-color: #EEEEEE;
    }
    </style>
<script language="JavaScript" type="text/javascript">
function onImgErrorSmall(source)
{
source.src = "http://www.forbes.com/favicon.ico";
// disable onerror to prevent endless loop
source.onerror = "";
return true;
}

function onImgErrorLarge(source)
{
source.src = "http://www.forbes.com/favicon.ico";
// disable onerror to prevent endless loop
source.onerror = "";
return true;
}
</script>
</head>
<body>

<?php

function baseurl($url) {

// you can add more to it if you want
$urlMap = array('com', 'co.uk','it','org','net','ca','io','me','edu','ac.uk','info','au');

$host = "";
//$url = "http://www.google.co.uk";

$urlData = parse_url($url);
$hostData = explode('.', $urlData['host']);
$hostData = array_reverse($hostData);

if(array_search($hostData[1] . '.' . $hostData[0], $urlMap) !== FALSE) {
  $host = $hostData[2] . '.' . $hostData[1] . '.' . $hostData[0];
} elseif(array_search($hostData[0], $urlMap) !== FALSE) {
  $host = $hostData[1] . '.' . $hostData[0];
}

return $host;

}
function highlight($text, $words) {
    preg_match_all('~\w+~', $words, $m);
    if(!$m)
        return $text;
    $re = '~\\b(' . implode('|', $m[0]) . ')\\b~i';
    return preg_replace($re, '<span class="code">$0</span>', $text);
}

$q=$_GET["q"];

$con = mysql_connect('mysql.site.com','un','pw');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("getpocket", $con);

$sql="SELECT * FROM `articles` WHERE `given_title` like '%".$q."%' or `excerpt` like '%".$q."%' order by `time_added` desc";



$result = mysql_query($sql);



while($row = mysql_fetch_array($result))
  {
  $tit = highlight($row['given_title'], $q);
  $exc = highlight($row['excerpt'], $q);
  $url = $row['resolved_url'];
  ?> 
    <div id = "art">
    <h2><?php echo $tit;?></h2>
    <p><?php echo $exc;?></p>

    <div class = "view">

    <a href ="<?php echo $url;?>" target='_blank'><img src = "http://<?php echo baseurl($url);?>/favicon.ico" height="16" width="16" onerror="onImgErrorSmall(this)"></a>
    </div>
    </div>
<?php
}
mysql_close($con);
?> 

</body>
</html>

Any ideas what I'm doing wrong? 有什么想法我做错了吗？

Thanks 谢谢

Jonathan 乔纳森

Answer 1

add this before </body> 在</body>之前添加

<script>
    function onImgErrorLarge(orig_img) {
        var img = new Image();

        img.src =  orig_img.src;

        img.onerror = function() {
            orig_img.src = 'other source';
            //alert('Img not found');
        };
    }



function showUser(str) {
    if (str=="") {
        document.getElementById("txtHint").innerHTML="";
        return;
    }
    if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)  {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

            var imgs = document.getElementsByTagName('img');

            for(var i = 0; i < imgs.length; i++) 
               onImgErrorLarge(imgs[i]);
        }
    }
    xmlhttp.open("GET","getarticles.php?q="+str,true);
    xmlhttp.send();
}



</script>

Answer 2

You can use .error() API to detect broken images. 您可以使用.error（） API来检测损坏的图像。

jQuery('img').error(function() {
        //Do stuff if broken image found
    });

This article will also help you: Remove Broken Images using jQuery 本文还将为您提供帮助：使用jQuery删除损坏的图像

使用javascript检测损坏的图像不起作用

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-01-21 12:20:30

解决方案2
0 2014-11-18 05:34:30

使用javascript检测损坏的图像不起作用

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-01-21 12:20:30

解决方案2 0 2014-11-18 05:34:30

解决方案1
1 已采纳 2013-01-21 12:20:30

解决方案2
0 2014-11-18 05:34:30