Home/ Questions/Q 6634113
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T22:53:31+00:00

I have a picture array that is stored globally. Every second I choose a

  • 0

I have a picture array that is stored globally. Every second I choose a picture on the screen, fade it out, and replace it with a picture from the array. I use: $("#picture" + picture.id).remove() to remove the current picture from the screen. Then I use

$(".pictureframe").prepend(

<div id="picture+picture.id" class="imageframe" style="opacity:0; left:x px; top:y px;" >
    <img class="image" width="picture.width" height="picture.height" src="picture.source" />
</div>

);

I removed all the escaping to make it easier to read. picture is the object so picture.id is the pictures id. The problem is that having the page open (and the only one open) kills browser memory. I get to 1.4gb usage with just that page. I imagine that the browser is creating a clone of the image every time it gets reinserted. Is there a garbage collector delete function I can call on the DOM elements I removed? How would I do that?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The way I would go about doing it is to have all the images there at once, but with all-but-one of them set to display: none, then fade them in/out as needed. This way there’s no real DOM manipulation, only styles, and memory won’t leak out of your computer’s USB ports :p

    • 0