CODEWITHSUNDEEP
javajavascriptandroidhtmlwebview
bluemoon12
bluemoon12

Reputation: 73

Android webview images not showing after loading once

In android, I'm loading a local html with local images into a webview. On the emulators and even on one newer android device I tested, everything works fine - there are no problems. However, I have a much older device (with android 2.3.4) that has an issue. When I first load the html file, the images display fine. When I click the phone back button, then navigate back to the page, the images disappear. I'm trying to figure out if this is a common problem or just a problem with an old phone.

Here is the loading file:

    w = (WebView) findViewById(R.id.webview1);
    w.getSettings().setJavaScriptEnabled(true);
    w.getSettings().setBuiltInZoomControls(false);
    w.getSettings().setDefaultTextEncodingName("utf-8");

    InputStream is;
    try {
        is = getAssets().open("Learn/TrigGraphing.html");

        int size = is.available();

        byte[] buffer = new byte[size];
        is.read(buffer);
        is.close();

        String str = new String(buffer);

        w.loadDataWithBaseURL("file:///android_asset/Learn/Images/", str, "text/html", "utf-8", "file:///android_asset/Learn/TrigGraphing.html");

    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }

Here is the html:

<img id="img03" class="images" src="file:///android_asset/Learn/Images/UnitCircle10.png"/>

There is also one twist - I resize the images if they're too big to fit on screen. This is mainly for tablets. On the html body onload() function, I execute the following javascript:

function checkImgSize() {
if($(document).width() > $(window).width()) {

    windowWidth = $(window).width();

    var elements = document.getElementsByClassName("images");
    for (var i=0; i<elements.length; i++) {

        currentImgWidth = elements[i].width;
        currentImgHeight = elements[i].height;

        newImgWidth = Math.round(0.85*windowWidth);
        newImgHeight = (newImgWidth/currentImgWidth)*currentImgHeight;

        elements[i].style.width = newImgWidth;
        elements[i].style.height = newImgHeight;

    }
}

I looked at this resize function and I dont see why it would make the images disappear if they loaded a second time but I'm not sure. Anybody have any advice?

Upvotes: 4

Views: 5688

Answers (2)

Romildo Cumbe
Romildo Cumbe

Reputation: 1

I solved my problem by using css background property instead of img tag.

Instead of this: 

<img width="100" height="100" class="images" src="file:///android_asset/Learn/Images/UnitCircle10.png"/>

I used this:

<div style="width: 100px; height: 100px; background:url(file:///android_asset/Learn/Images/UnitCircle10.png); background-size:cover; "></div>

Upvotes: 0

bluemoon12
bluemoon12

Reputation: 73

I solved my own problem after thinking about it for awhile. Apparently the webpage was loading from the cache after it loaded once and for some reason this messed it up - though i'm still not sure why. I just cleared the cache with "w.clearCache(true);" before loading the html and it works fine now.

Upvotes: 2

Related Questions