0

Была задача: если по указаному пути img нет картинки, выводить другую картинку. По сути, изменить иконку ошибки img. Чтобы в каждом тэге не писать onerror решил использовать js для всех img.

Код написан, но он работает очень странно. Если обновить страницу через ctrl+F5, замена src не срабатывает только на img в header. Если просто обновлять, каждый раз по разному. В основном не делает замену в header и первых 1-3 проходах цикла где img с ошибкой. После обновления страницы пару десятков раз, все работает.

Подскажите почему так происходит и как исправить? Или есть какой-нибудь альтернативный способ?

jQuery('document').ready(function(){
    jQuery('img').on('error', function(){   
        jQuery(this).attr("src", "images/error_image.png");
    });

    jQuery('body').css("visibility","visible");
});
    <header class="header">
        <img src="images/kek.png"/>
        <nav>
            <ul>
                <li>
                    <a href="#">Обо мне</a>
                </li>
                <li>
                    <a href="#">Контакты</a>
                </li>
            </ul>
        </nav>
    </header>

    <section class="main_section">
        <div class="main_list">
            <ul>
                <?php
                    include("includes/db_connect.php");
                    $query="SELECT * FROM projects";
                    $result= mysqli_query($connection, $query);
                    while ($data=mysqli_fetch_assoc($result))
                    {
                        echo '
                        <li>
                            <div>
                                <a href="'.$data["link"].'">
                                    <img src="images/'.$data["name"].'.png"/>
                                    <div class="img_after"></div>
                                    <div class="name_link">'.$data["name"].'</div>
                                </a>
                            </div>
                        </li>
                        ';
                    }
                ?>
            </ul>
        </div>
    </section>
1
  • я так понимаю, что в тот момент, когда выполняется Ваш скрипт, некоторые картинки уже бросили onerror 9 июл 2019 в 16:48

1 ответ 1

1

Поставьте Ваш код перед закрывающим тегом </body>

<body>
  ...
  <script>
  $('img').on('error', function(){
    $(this).attr('src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Noimage.svg/739px-Noimage.svg.png')
  });
  </script>
</body>

img {max-width: 200px; max-height: 150px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!----->
<img src="/noimage/.png">
<img src="https://i.pinimg.com/originals/18/6b/d2/186bd27aec856f02b5b92867ce0164ab.jpg">
<img src="/nomage/.png">
<img src="/noige/.jpg">
<img src="https://img.freepik.com/free-vector/abstract-dynamic-pattern-wallpaper-vector_53876-59131.jpg">
<img src="/nage/">

<script>
$('img').on('error', function(){
  $(this).attr('src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Noimage.svg/739px-Noimage.svg.png')
});
</script>

2
  • Есть инфа почему так происходит? Разве jQuery('document').ready() не должен работать после того как все загрузится?
    – Kriker39
    10 июл 2019 в 19:23
  • @Kriker39, document.ready - говорит JQ и JS о том, что страница получена, в этот момент будет работать скрипт, window.on('load') говорит как раз о том, что всё загружено. В большинстве случаев, перед </body> обычно всё заканчивает и это можно отнести к тому, что все элементы отрендерелись (не загрузились, а именно отрендерились).
    – De.Minov
    11 июл 2019 в 5:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.