I have eight images ranging in size from 64KB to 747KB that are in an images/ folder in my Tizen Wearables project. My app launches with a screen showing the first image in an <img> tag inside a container <div>. The <div> has an onlick function that removes the <img> tag from the DOM, then sets its HTML content with jQuery to a new <img> tag with the second image as its source. On the next click the <img> tag is removed and replaced with one with the third image as its src, and so on. The eighth time the div is clicked, the images cycle through again, and so on. Here's the relevant code:
html file:
<body>
<div style="background: #fff;" id="etchings1">
<div id="etching-container" onclick="showNextEtching()">
<img class="etching-img" src="images/etchings/etching_heart2.png">
</div>
</div>
</body>
</html>
My app.js file:
var imgElems;
var currentEtching = 0;
$(window).load(function() {
var imgUrls = [
'images/etchings/etching_heart2.png', 'images/etchings/etching_late.png',
'images/etchings/etching_martini.png', 'images/etchings/etching_omg.png',
'images/etchings/etching_smiley.png', 'images/etchings/etching_ticatactoe.png',
'images/etchings/etching_gift.png', 'images/etchings/etching_glassclink.png'
];
imgElems = [];
for(var i = 0; i < imgUrls.length; i++) {
var imgString = '<img class="etching-img" src="' + imgUrls[i] + '">';
imgElems.push(imgString);
}
});
function showNextEtching() {
var etImgElem = document.getElementsByClassName('etching-img');
var imgElem = etImgElem[0];
imgElem.parentNode.removeChild(imgElem);
currentEtching < 7 ? currentEtching++ : currentEtching = 0;
$('#etching-container').html(imgElems[currentEtching]);
}
Seems simple enough, but I am running into memory management issues every time I try to run the app on a device (Samsung Gear S). After clicking through the images a time or two, the app crashes. In the logs I see the message:
[lowmem_get_memory_cgroup_victims,777] should_be_freed = 45 MB E/RESOURCED( 808): vmpressure-lowmem-handler.c: lowmem_oom_killer_cb(901) > [lowmem_oom_killer_cb,901] we killed, force(0), lowmem lv2 = 7708 (WebProcess) score = 100, size = 175076 KB, victim total size = 175076 KB
The memory log in the Timeline section of the debugger doesn't give me any clues either. Memory usage increases for the most part with each click, but descreases sometimes and tops out at about 1.8MB.
My app is not referencing any other pages or assets. I have no problems running my project in a browser. Looks like it could be a bug in Tizen's memory management. Any ideas about what's going on?
Thanks so much!!