jQuery: Remove each image after it loads

skij
skij used Ask the Experts™
on
After the image loads, I want to remove it.  This does NOT work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
img {
width: 100px;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    var imgI=0;
    $('.showImage img').each(function() {
        var tmpImg = new Image() ;
        tmpImg.onload = function(){

          $(this).remove();

         if( imgI++ === ($('.showImage img').length-1) ) {
          alert('all images loaded!');
         }
        }
        tmpImg.src = $(this).attr('src');
    }) ;
}) ;

</script>

</head>
<body>

 <div class="showImage"><img src="http://www.space.com/images/i/000/056/377/original/fullmoonmultiple.JPG?interpolation=lanczos-none&fit=inside%7C660:*?z2z2322z" alt=""/></div>
 <div class="showImage"><img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg?z3z32z22" alt=""/></div>
 <div class="showImage"><img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Howling_at_the_Moon_in_Mississauga.jpg?3z23z2z" alt=""/></div>

</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Marco GasiFreelancer
Top Expert 2010
Commented:
Why not doing just this?
$(document).ready(function() {
    $('.showImage img').each(function() {
        var tmpImg = new Image() ;
        tmpImg.src = $(this).attr('src');
        $(this).remove();
    }) ;
}) ;

Open in new window

Marco GasiFreelancer
Top Expert 2010

Commented:
Or this?
$(document).ready(function() {

    var imgI=0;
    $('.showImage img').each(function() {
      var $this = $(this);
        var tmpImg = new Image() ;
        tmpImg.onload = function(){
         if( imgI++ === ($('.showImage img').length-1) ) {
          alert('all images loaded!');
         }
         $this.remove();
        };
        tmpImg.src = $(this).attr('src');
    }) ;
}) ;

Open in new window

See it here: http://test.webintenerife.com/hideimages.html
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
You can do it like this
  $('.showImage img').on('load', function() {
    $(this).remove();
  });

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Not sure what you are doing with

tmpImg.src = $(this).attr('src');

Open in new window


Where are you using tmpImg ? Only the last image loaded will actually have a value but you won't be able to access it because tmpImg is declared locally within the event handler?
leakim971Multitechnician
Top Expert 2014
Commented:
Test page : https://jsfiddle.net/fmbLvx0x/

<script type="text/javascript">
$(window).load(function() {
    alert('all images loaded!');
    $('.showImage img').remove();
});
</script>

Open in new window

greetings  skij , , ,  You show JS code that is suppose to eliminate Images <img> as soon as they load into the page, , I do not see this as an effective use of the page structure? ? If you do not want or need these images then do not place the all of <img> into the page. You are trying to get all of the <img> web locations into a newly created "tmpImg"

But I do NOT understand what your code efforts are trying to accomplish? ? ? You seem to need the images (as new images with the identical src ) stored to be used later for something else?

Can you tell us what you are trying to do? And what problem you are trying to FIX with the code block you show, and what result you need (what the new images) to happen, to get the page as you need it? ?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial