how to destroy or stop the page loading pictures if we click back from it?

[Muneer_B_]

HI,

How can I destroy a page or stop it from loading any more contents or pictures if I move Back from it. Because I have a page which I load the content to it by Ajax, the content contains really many pictures with good quality, If I move Back from it, it seems still working and still loading in background, I think because if I load a new content to the same page the new pictures for the new contents are appear to be shown but slow and , every time the slow time become more.

For example I have details.html page.

1. First I load a new content to it with big number of images to the details.html, the images loaded fast and shown, then I go back from it to the main page,

2. Second I load a new other content which is also contains a big number of images to the same page(details.html) using $('#details').html(content);, the image become slightly slow to be shown, then I go back from it to the main.

3. Third I load a third new content to the same page details.html using $('#details').html(content);, this time the load of images become more slower.

and so on.

I though may be the previous pages or contents are not destroyed and they are still loading there self images, and that effect new pages and make them very slow to show the images, Is there any solution for this.

because If I close the App and reopen it, every time the first contents are fast to show the images.

Waiting your help

Thanks

[Dale_S_Intel]

Have you tried aborting it as described here?

Dale

[Muneer_B_]

Hi Dale,

Thanks for your reply.

Actually the Ajax is processed, and I got each time a response, then I attached that response to a DIV container. The problem is that the images seems still loaded from their src in background process even if I go back and open a new or previous page. 

Hope You understand my point.

Thanks

[Wesley_S_1]

You could use something like "lazyload". The images will not be loaded until they are onscreen:

Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading. 

Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load. 

http://www.appelsiini.net/projects/lazyload

[Elroy_A_Intel]

You can also empty the variables or data structures that you are using to store the information associated to your images when exiting the page.I also recommend removing the images that may have been created dynamically as an additional cleanup effort.