Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 92
  • Last Modified:

jQuery: Remove each image after it loads

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
skij
Asked:
skij
3 Solutions
 
Marco GasiFreelancerCommented:
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
 
Marco GasiFreelancerCommented:
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
 
Julian HansenCommented:
You can do it like this
  $('.showImage img').on('load', function() {
    $(this).remove();
  });

Open in new window

0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
Julian HansenCommented:
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
 
leakim971PluritechnicianCommented:
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
 
Slick812Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now