有没有一种方法来编程确定图像链接不好？ [英] Is there a way to programmatically determine that an image link is bad?

问题描述

在我正在处理的网站中，显示的图像并不总是（显示），因为链接可能不好或陈旧（或其他）。你可以在这里看到：为什么我的动态HTML看似随机放置？

发生这种情况时，我希望能够在图像所在的位置显示图像不可用消息。那可能吗？如果是这样，需要两件事：

  1）为了能够以编程方式确定图像未被显示
）在这种情况下，用上述消息替换它：
  

也许类似于（伪代码）：

  if（ImageMissing）{
 $（'img'）。Attr（'src'，'imageMissing.png ）; 
} 
  

？

UPDATE

好的，所以代码应该像这样：

 函数doSomething（）{
 var htmlBuilder =''; 
 $ .getJSON（'duckbills.json'，function（）{
 // each ... 
 //处理json文件，构建动态html 
 htmlBuilder + =' img =bla.png...'; 
 
 $（'img'）。error（function（）{
 $（this）.attr（src，imageMissing bng）; 
}）; 
}）：
}）：
  

???

这是否会导致添加的每个图像都会附加该错误处理程序，以便绑定N个事件处理程序，每个图像一个？

或者应该是：

 函数doSomething（）{
 var htmlBuilder =''; 
 $ .getJSON（'duckbills.json'，function（）{
 // each ... 
 //处理json文件，构建动态html 
 htmlBuilder + ='错误（函数（）{
 $（this）.attr（src）;'
'）：
'（'img' ，imageMissing.png）; 
}）; 
}）：
  

???

UPDATE 2

这是我的代码，它不起作用：

  $。getJSON（'Content / NBCCJr.json'，function（data）{
 $ .each（data，function（i，dataPoint）{
 if（IsYear（dataPoint .category））{
 htmlBuilder + ='< div class = \yearBanner \>'+ dataPoint.category +'< / div>'; 
} else {
 htmlBuilder + ='< section class = \wrapper \>< a id = \mainImage \class = \floatLeft \href = \'+ 
 dataPoint.imghref +'\'+'target = \_blank\>< img height = \160 \width = \107\src = \ '+ 
 dataPoint.imgsrc +'\'+ 
 dataPoint.imgalt +'>< / img>< / a>'+ 
'< div id = \\prizeCategory \class = \类别\\>'+ 
 dataPoint.category + 
'< / div>< br />< cite id = \prizeTitle \>'+ 
 dataPoint.title + 
'< / cite>< br />< div id = \prizeArtist\class = \author\>'+ 
 dataPoint .author + 
'< / div>< br />'; 
 if（dataPoint.kindle.trim（）。length> 2）{
 htmlBuilder + ='< button>< a href = \\'''+ Urlize（dataPoint.kindle）+' \'+ 
'target = \_blank\> Kindle< / a>< / button>'; （dataPoint.hardbound.trim（）。length> 2）{
 htmlBuilder + ='< button>< a href = \\'''+ Urlize（dataPoint .hardbound）+'\''+ 
'target = \_blank\>精装< / a>< / button>'; （dataPoint.paperback.trim（）。length> 2）{
 htmlBuilder + ='< button>< a href = \'''+ Urlize（dataPoint 
）平装< / a>< / button>';平装< / a>< / button>'; 
} 
 htmlBuilder + ='< / section>'; 
 $ b $ //不工作
 $（'img'）。error（function（）{
 $（this）.attr（src，Content / NoImageAvailable .png）; 
}）; 
} 
}）; //每个
  

...并且我不知道为什么......

解决方案

当然， error（）方法：

  $（'img'）。error（function（）{
 $（this）.attr（ src，imageMissing.png）; 
}）; 
  

错误事件发送给元素，例如图像
由文档引用并由浏览器加载。如果
元素未正确加载，则调用它。

In the site that I'm working on, the image displayed is not always (displayed) because the link could be bad or stale (or whatever). You can see it here: Why is my dynamic HTML seemingly randomly placed?

When that happens, I want to be able to show an "Image Unavailable" message where the image would be. Is that possible? If so, two things are needed:

1) To be able to determine programmatically that the image is not being displayed
2) To replace it, in that case, with aforementioned message

Perhaps something like (pseudocode):

if (ImageMissing) {
    $('img').Attr('src', 'imageMissing.png');
}

?

UPDATE

Okay, so the code should be like:

function doSomething() {
    var htmlBuilder = '';
    $.getJSON('duckbills.json', function() {
        // each ...
        // process the json file, building dynamic html
        htmlBuilder += 'img="bla.png"...';

        $('img').error(function() {
             $(this).attr("src", "imageMissing.png");
        });
    }):
}):

???

Does this cause each image, as it's added, to have that error handler attached to it, so that there are N event handlers bound, one for each image?

Or should it be:

function doSomething() {
    var htmlBuilder = '';
    $.getJSON('duckbills.json', function() {
        // each ...
        // process the json file, building dynamic html
        htmlBuilder += 'img="bla.png"...';
    }):
    $('img').error(function() {
         $(this).attr("src", "imageMissing.png");
    });
}):

???

UPDATE 2

This is my code, and it doesn't work:

$.getJSON('Content/NBCCJr.json', function (data) {
    $.each(data, function (i, dataPoint) {
        if (IsYear(dataPoint.category)) {
            htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>';
        } else { 
            htmlBuilder += '<section class=\"wrapper\" ><a id=\"mainImage\" class=\"floatLeft\" href=\"' +
                dataPoint.imghref + '\"' + ' target=\"_blank\"><img height=\"160\" width=\"107\" src=\"' +
                dataPoint.imgsrc + '\"' +
                dataPoint.imgalt + '></img></a>' +
                '<div id=\"prizeCategory\" class=\"category\">' +
                dataPoint.category +
                '</div><br/><cite id=\"prizeTitle\" >' +
                dataPoint.title +
                '</cite><br/><div id=\"prizeArtist\" class=\"author\">' +
                dataPoint.author +
                '</div><br/>';
            if (dataPoint.kindle.trim().length > 2) {
                htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.kindle) + '\"' +
                    ' target=\"_blank\">Kindle</a></button>';
            }
            if (dataPoint.hardbound.trim().length > 2) {
                htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.hardbound) + '\"' +
                    ' target=\"_blank\">Hardbound</a></button>';
            }
            if (dataPoint.paperback.trim().length > 2) {
                htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.paperback) + '\"' +
                    ' target=\"_blank\">Paperback</a></button>';
            }
            htmlBuilder += '</section>';                

        // Doesn't work
        $('img').error(function () {
            $(this).attr("src", "Content/NoImageAvailable.png");
        });
    }
}); //each

...and I don't know why...

解决方案

Sure is, the error() method :

$('img').error(function() {
    $(this).attr("src", "imageMissing.png");
});

The error event is sent to elements, such as images, that are referenced by a document and loaded by the browser. It is called if the element was not loaded correctly.

这篇关于有没有一种方法来编程确定图像链接不好？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！