使用javascript檢測損壞的圖像不起作用

Question

我已經嘗試過使用javascript來檢測損壞的圖像的許多解決方案，但是它似乎不起作用。 知道我在做什么錯嗎？

從此處的下拉框中選擇“ jquery”以查看損壞的圖像：-

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

該站點的代碼在這里：

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

有什么想法我做錯了嗎？

謝謝

喬納森

Answer 1

在</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

您可以使用.error（） API來檢測損壞的圖像。

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

本文還將為您提供幫助：使用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