detect broken image with javascript not working

Question

I have tried many of the solutions using javascript to detect broken images but it doesn't seem to work. Any idea what I'm doing wrong?

Select 'jquery' from the dropdown box here to see the broken images:-

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>

<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.

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

This article will also help you: Remove Broken Images using jQuery

detect broken image with javascript not working

Question

2 answers

solution1
1 ACCPTED 2013-01-21 12:20:30

solution2
0 2014-11-18 05:34:30

detect broken image with javascript not working

Question

2 answers

solution1 1 ACCPTED 2013-01-21 12:20:30

solution2 0 2014-11-18 05:34:30

solution1
1 ACCPTED 2013-01-21 12:20:30

solution2
0 2014-11-18 05:34:30