hide or delete image not found with $("img").error(function()

Question

In my page I can have images not uploaded yet or removed by error so I'm looking for something who can remove or hide the warning about my img src not found ?

you can check my code here or in this link ->

http://www.booclin.ovh/tom/2/

here is my code

$("img").error(function() {
  $(this).parent().remove();
});

$("a.fancyboxgallery").fancybox();

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/6.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/06.jpg" alt=""/>
</a>
    
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/5.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/05.jpg" alt=""/>
</a>
    
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/4.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/04.jpg" alt=""/>
</a>
    

    
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/3.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/03.jpg" alt=""/>
</a>
    
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/2.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/02.jpg" alt=""/>
</a>
    
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/1.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/01.jpg" alt=""/>
</a>

Louys Patrice Bessette · Accepted Answer · 2016-10-16T19:00:42.253

The error you have in console : $ is not defined mean jQuery is NOT loaded.

You load it inside <div class="rightpart"> within the <body>.

Try loading it in the <head> right before: <script type="text/javascript" src="index/js/jquery.fancybox.js"></script>

EDIT

Here is your HTML copied for the code inspector of your live link:

<html lang="en" class="js backgroundsize"><!--<![endif]-->
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes">

        <link property="stylesheet" rel="stylesheet" type="text/css" href="index/css/style.css" class="--apng-checked">

        <link property="stylesheet" rel="stylesheet" type="text/css" href="index/font/font.css" class="--apng-checked">

        <link rel="stylesheet" type="text/css" media="screen" href="index/css/jquery.fancybox.css" class="--apng-checked">

        <link rel="stylesheet" media="screen" href="index/js/jquery.fancybox.css" type="text/css" class="--apng-checked">

        <script type="text/javascript" src="index/js/jquery.fancybox.js"></script>

        <script type="text/javascript" src="index/js/fancybox.js"></script>

        <style type="text/css" class="--apng-checked">.fancybox-margin{margin-right:0px;}</style>
    </head>

    <body>

        <div class="leftpart">
            <a href="#">PROJECT</a>
        </div>

        <div class="rightpart">
            <div id="globalgalerie">


                <a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/3.jpg" title="">
                <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/03.jpg" alt="">
                </a>

                <a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/2.jpg" title="">
                <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/02.jpg" alt="">
                </a>

                <a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/1.jpg" title="">
                <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/01.jpg" alt="">
                </a>
            </div>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

        <script type="text/javascript" src="index/js/modernizr.custom.js"></script>

        <script type="text/javascript" src="index/js/jquery.fancybox.js"></script>

        <script type="text/javascript" src="index/js/fancybox.js"></script>

        <script type="text/javascript">
            $("img").error(function() { $(this).parent().remove(); });
            $("a.fancyboxgallery").fancybox();
        </script>   

    </body>
</html>

So what I mean is to move these line in the <head> section:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script type="text/javascript" src="index/js/modernizr.custom.js"></script>

<script type="text/javascript" src="index/js/jquery.fancybox.js"></script>

<script type="text/javascript" src="index/js/fancybox.js"></script>

These ones are already in the <head>... No need to duplicate them.

<script type="text/javascript" src="index/js/jquery.fancybox.js"></script>

<script type="text/javascript" src="index/js/fancybox.js"></script>

Your error function is ok at the end of the <body>.

I'm sorry i don't really why my files were duplicated in my page ?!?! I removed them but the error still exist ;( you can check my page here if all is ok -> http://www.booclin.ovh/tom/2/index.html — coolio83000, Oct 16 '16 at 19:06
That is better... And the parents of imgs that trigger error are removed. About the error still shown in console, I don't know if it is possible to do something. — Louys Patrice Bessette, Oct 16 '16 at 19:13
ah that's what think i had a part of answer about this problem but i don't know how to use this information -> "you will have to receive the 404 in the console because the that is what causes the .error event" — coolio83000, Oct 16 '16 at 19:16
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/125853/discussion-between-louys-patrice-bessette-and-coolio83000). — Louys Patrice Bessette, Oct 16 '16 at 19:19
The issue is not if jQuery is loaded in the `` section or not, it's actually a best practice to load all your js files at the end of the document (before the closing `` tag if you want.) This was a typical hoisting issue, where the fancybox js files were loaded **before** the jQuery js file (fancybox js file was loaded in the `` section while jQuery at the bottom of the document) — JFK, Oct 18 '16 at 00:25
Doesn't really matter if you load all the js files in `` section or at the bottom of the document as long as you load them in the proper order ;) — JFK, Oct 18 '16 at 00:26

hide or delete image not found with $("img").error(function()

1 Answers1