Solved

jQuery: Remove each image after it loads

Posted on 2016-08-09
6
53 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 57

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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 57

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 34

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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

729 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