I am writing single page application which displays lot of images.
I have problem with consumption of memory by browser because he still remember images which I deleted from DOM (and img objects destroyed) from page.
In development toolbar I can still see in Resources the images which are not displayed yet.
Test it in Chrome and Safari.
Is there any way how to release these images?
Related
My current issue is that I have a loading bar animation on my web-based app that is shown (obviously) when the whole page or specific things are loading up. It is supposed to look like one of those Samsung TV Apps so it needs to be quite polished with the UX.
What me and my team are doing right now is a mix between creating an element for it and I assumed it gets cached in the local device which is an issue. I've known of a few ways that I can go around this like adding a Math.random() query at the end of the src url but I'd rather not follow that route for now.
I also saw a way that I believe involved simply setting the element.src = 'theSameUrl.gif' URL to be the same and I assume forcing the device to reload the file instead of using the cached one.
I would also be open to trying new file types that could make this a lot easier but I must keep in mind that this app will work on a LOT of different hardware, from Samsung TV's to BT Boxes or even Virgin Media Tv Boxes, amazon firestick etc.
At this point I'll take anything :P
You can "force it" to reload by wiping it source: img.src = ""
Then you set it again: img.src = "your_src_path"
This way your .gif will start from zero, at least on Edge, Chrome and Firefox, it should work the same way on a TV.
I am attempting to show a simple mockup to a potential client of how he could stream media from his own online radio station to a page. The radio station was built using an external site and in Safari rendering the station's share link in an iFrame works perfectly, and plays immediately on page load without the user having to do anything. Here is the pure html code; there's no JS for this page now:
<iframe src="https://lucasdraft.out.airtime.pro/lucasdraft_a" frameborder="0"></iframe>
The CSS:
iframe {
height: 50px;
width: 200px;
float: right;
}
But in Chrome, half the time when I try to load the page the iframe doesn't show up at all and the page loads continuously with the status at bottom left displaying "Waiting for available socket"- again this never happens on Safari. When it does load in Chrome, instead of showing the basic media player from the external source it shows a sort of gray semi-circle with three dots. If I click this gray blob it begins playing, but this is very un-intuitive to a user not to mention ugly. I assume this is a security feature in Chrome but haven't found any reliable way of fixing it. Increasing the size of the iframe does not change anything.
Safari (working as expected):
Chrome loading error:
Chrome with cache cleared, after loading the iframe:
Thanks and anything helps in fixing this pesky error!
For the Waiting for available socket, a quick google search got me this answer. Chrome hangs after certain amount of data transfered - waiting for available socket It's always a good idea to google something before asking.
For the visual problem. the Url in your Iframe is calling a video. Different browsers use different style for their video player. Chrome just needs a little bit more height. I find that 100px works well.
I had the same issue(Worked in safari but not in chrome). In my case the issue was the Ad-blocker . Ad-blocker usually writes scripts to override the iframe styles.
Once I disable the ad-blocker or load the project in incognito(private browser) window the iframe content loaded successfully.
https://github.com/mliu95/quintus-tag
Source code is there.
I was following Liu's tutorial on this (https://mliu95.github.io/2014/09/16/Creating-an-online-multiplayer-web-game-using-Socketio-and-Quintus-Part2/)
Part 1 worked perfectly fine (single player with a movable sprite). However, upon introducing multiplayer (accomplished by opening multiple windows with localhost:8080), the sprites simply don't appear on the screen.
Also, you are dealing with a complete noob in terms of networking. I know a decent amount of Java but have no experience whatsoever. Any advice would be greatly appreciated.
You didn't give much information to go on, and didn't respond to my question in the comments that could clarify the issue.
But here is what I think is happening, in part one of the tutorial he lists his sprite paths here:
var files = [
'/images/tiles.png',
'/maps/arena.json',
'/images/sprites.png',
'/images/sprites.json'
];
I'm assuming your sprites are 404'ing (not being found), so here is a possible fix.
Your file structure is probably not the same as his, where are you storing the sprite images locally (on your pc)? It needs to be in the same paths as shown above. Sprites should be located in YourProjectFolder/images. Make sure your your sprite file is named sprites.png
After making sure all those files are placed correctly, open your developer tools (f12), head to the network tab, check the "disable cache" box (if you're on chrome). And refresh.
It should load your sprites after these changes, and if not, you need to post the specific errors you are running into. The errors will show up in developer tools after you refreshed, if it is still unable to find them.
Good luck
I'm noticing my Phonegap app is having some memory issues on iOS7 that weren't happening on iOS6 .
long iScroll lists with many images
displaying images from the phone's album (9mp) will crash after you view several
For #1, this was never an issue on iOS6, regardless of device.
For #2, I am re-using the same DIV element to display the next picture, so it seems that the previous image is not being cleared.
The techniques mentioned in this post no longer appear to work in iOS7:
iPad/iPhone browser crashing when loading images in Javascript
The best solution for this problem I found is the following code:
var img = document.getElementById('imageID');
img.parentNode.removeChild(img);
img.src = 'data:image/gif;base64,' +
'R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
setTimeout(function() {
img = null;
}, 60000);
This sets the src attribute to a tiny gif and then waits long enough for garbage collection to happen eventually.
See: http://www.fngtps.com/2010/mobile-safari-image-resource-limit-workaround/
This should work for you. I could verify that the memory is released by using the Xcode instruments. Unfortunately this solution doesn't seem to work for homescreen apps which I am using.
I have a website where sometimes it loads quickly, however sometimes it seems as though the page has stopped loading half way through, possibly due to a script.
The website is http://www.pinspired.com - The tabbed sidebar on the right is the problem. I am using a simple jquery tab plugin and twitter and facebook script in the tabs.
Firstly, does the page load quickly for you?
How can I find out which script is stopping the rest of the page loading. It is hard to test as it only happens occasionally.
Thanks in advance.
I just ran the dev tools and it looked like the jquery.carousel plugin is what took the longest.
That aside, my feeling is that you should reconsider using an iframe to load in the carousel. I do know that multiple iframes on a page can slow the page down. And considering the size of the content you are loading inside that iframe, it might explain the delay. You might want to do some research on iframes and consider the order in which iframes are loaded into the DOM.
Your site's loading fine here.
For the Facebook "Like Box", consider using the iframe version.
http://developers.facebook.com/docs/reference/plugins/like-box/
After clicking the "Get Code" button, select "IFRAME". This may remedy your issue.
I suggest you have a look at the chrome developer tools. You can see how long it takes to load each resource (87 request just to load the landing page - wow!), you can profile scripts to see if something takes very/too long and you can even do an audit and let it check several things you can possibly optimize.
For example
merge the javascripts you are loading from the same domain
set the webserver to use gzip to send script/html files compressed
many resources are explicitly set to be not cachable; for example all the product images and the social media pins (preventing that they are loaded over and over again and will speed up things a lot after the they first page load)
merging images like the social media pins and use css sprites
provide different/only the needed css scripts for each site; according to chrome almost 300kb of css rules are unused on the frontpage
You can find out all that stuff usign the Chrome Developer Tools. All you need is Chromium/Google Chrome.
If it is really the facebook script couldn't you just add a slight delay before loading the fb plugin? Like 500 - 1000ms or so after everything else (well most of it) is loaded.
EDIT: The answer drewcode posted is right. It looks like jquery.jcarousel is causing the delay. See here: