Titanium Community Questions & Answer Archive

Question

Using ImageViews within a WebView

I have HTML content with images that I want to display in a WebView, but I want to cache the images so they are only downloaded once and can then be viewed offline. Essentially I'd like to use an ImageView for the images, and have the HTML text content display as a WebView. Is it possible to do this? I'd like to somehow integrate a WebView with multiple ImageViews into a single, fluid-scrolling view?

I tried splitting my HTML on the image tags, and adding WebViews (for the HTML text) and ImageViews (for the images) to a ScrollView but this doesn't give me what I'm looking for. Rather, it renders as independently scrolling views, and I don't know how to place one view after the next so they don't overlap (would require setting "top" of the current view to the height of the previous view, plus an offset). Here is some sample code of what I tried:

var imageRE = /<p><img[^>]*?\/><\/p>/g;

var sections = body.split(imageRE);
var matches = body.match(imageRE);

var scrollView = Titanium.UI.createScrollView({
  contentHeight: 'auto',
  contentWidth: 'auto',
  showVerticalScrollIndicator: true,
  top: 0
});

for (i = 0; i < sections.length; i++) {
  var webView = Titanium.UI.createWebView({
    html: '<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><link rel="stylesheet" href="css/style.css" type="text/css" /></head><body>' + sections[i] + '</body></html>',
    top: i * 100 //Hack to prevent overlapping views 
    });

  scrollView.add(webView);

  if (matches.length > i) {
    var imageUrl = matches[i].match(/src="(.*?)"/)[1];

    var imageView = Titanium.UI.createImageView({
      image: imageUrl,
      top: i * 150 //Hack to prevent overlapping views
    });

    scrollView.add(imageView);
  }
}

Has anyone solved this? Or does anyone have a solution for caching images in a WebView?

Answer 1

you can download the files with an XHR call, save them to the application data folder somewhere, then maybe you can replace the URLs in the html with the local urls to the images in the application data directory?

Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Using ImageViews within a WebView

1 Answer