Solved

jQuery: Remove each image after it loads

Posted on 2016-08-09
6
46 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 55

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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 
LVL 55

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

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

Suggested Solutions

Title # Comments Views Activity
jQuery delay animation 3 38
show form submit button based on jquery sum 5 46
jQuery Sticky Menu 24 36
How do I limit a simple jqModal Pop-Up to show only once per session? 2 11
Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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)
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…

820 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