Question

I have a one page document that has several images which need to load only on Android 2.3 phones and IE8/9 because the picturefill.js project doesn’t work properly on those devices.

I am successfully using this script once within one of my instances of picturefill code:

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
  // Do something!
  document.getElementById('theimage').innerHTML = '<img src="http://placehold.it/200x200">;
}

I need to use it a few more times on the page but have problems when I paste the exact code above more than once.

Is there a way to turn the above into a function that can be called to call different images for each instance of the unique images? I would need to use the above script to call at least 6 unique images across the page.

Answer 1

Once the code has executed once you don’t need the first 2 lines, as they are already set and redefining them can cause errors. Just use the if statement where necessary.

First Time

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
  // Do something!
  // Redirect to Android-site?
}

every subsequent time

if(isAndroid) {
  // Do something!
  // Redirect to Android-site?
}