У меня есть таблица, которая повторяет ссылку на изображение для загрузки файла для каждой строки данных. Я хочу использовать Jquery или Javascript, чтобы определить, возвращает ли ссылка на изображение ошибку 404, то есть файл, который он пытается найти, не существует, а затем установить для ссылки на изображение значение display: none , чтобы скрыть его.

Любая помощь высоко ценится!

Джейми .

---Редактировать---

Это мой URL, который должен быть скрыт, если он не может найти файл .igs

<a href="/path/to/file.igs"><img src="pic.jpg" alt="My Image Link"></a>

К сожалению, я не могу использовать обработку на стороне сервера.

2
Macker 26 Авг 2010 в 12:19

3 ответа

Лучший ответ

Вы можете использовать error () обработчик событий:

$("img").error(function () {
    $(this).css("display", "none");
});

// Find all <a> tags where href ends with .igs, hide and loop over them 
$("a[href$=.igs]").hide().each(function (i, el) {
    $.ajax({
        type: "HEAD",
        url: el.href,
        success: function () {
            // Success, we can unhide the element.
            el.show();
        }
    });        
});

Конечно, это не будет работать, если файлы находятся в других доменах. Кроме того, это может быть довольно дорогостоящей процедурой как для клиента, так и для сервера, если их много.

4
Andy E 26 Авг 2010 в 09:44

Или вы можете использовать комбинацию из двух ответов, предоставленных Reigel & Andy E, имея дополнительное изображение, которое отображается при возникновении ошибки ...

.downloadedImage, .downloadFailed { display:none; }

<table>
    <tr>
        <td>
            <img class="downloadedImage" src="imageUrl1.jpg"/>
            <img class="downloadFailed" src="downloadFailed.jpg"/>
        </td>
    </tr>
    <tr>
        <td>
            <img class="downloadedImage" src="imageUrl2.jpg"/>
            <img class="downloadFailed" src="downloadFailed.jpg"/>
        </td>
    </tr>
    <tr>
        <td>
            <img class="downloadedImage" src="imageUrl3.jpg"/>
            <img class="downloadFailed" src="downloadFailed.jpg"/>
        </td>
    </tr>
</table>

$("img.downloadedImage").load(function(){
    $(this).show();
}).error(function(){
    $(this).next().show();
});

Здесь важно отметить (если мое мышление верно) время выполнения jQuery. Если он запускается слишком рано, элементы DOM не будут доступны для назначения им обработчиков событий - если он выполняется слишком поздно, обработчики событий будут присоединены после того, как события произошли. Возможно, вам придется поэкспериментировать между размещением фрагмента jQuery в конце страницы и помещением его в обработчик $(document).ready.

ОБНОВЛЕНИЕ Быстрый эксперимент показывает, что фрагмент сценария работает лучше всего в конце страницы (или сразу после определения таблицы), как в обработчике $(document).ready.

1
belugabob 26 Авг 2010 в 09:06

Вы также можете использовать этот трюк,

$('img').hide().load(function(){
    $(this).show();
});

Это скроет все изображения и покажет его, когда он загрузится полностью.

1
Reigel 26 Авг 2010 в 08:25