Solved

jQuery: Remove each image after it loads

Posted on 2016-08-09
6
43 Views
Last Modified: 2016-08-10
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

0
Comment
Question by:skij
6 Comments
 
LVL 31

Assisted Solution

by:Marco Gasi
Marco Gasi earned 125 total points
ID: 41750311
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

0
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 41750316
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
0
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 250 total points
ID: 41750321
You can do it like this
  $('.showImage img').on('load', function() {
    $(this).remove();
  });

Open in new window

0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41750326
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?
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 125 total points
ID: 41750378
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

0
 
LVL 33

Expert Comment

by:Slick812
ID: 41750505
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? ?
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

by Julian Matz As of jQuery (http://jquery.com/) 1.4 the .live() method (http://api.jquery.com/live/) supports custom events as well as some standard JavaScript events that it previously didn't support. Among these is the submit event. Unlike …
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question