Remote background-image

ionic-v1
1

I know I can apply a background image to the content like that:

.scss

.scroll-content{
background-image: url(#{$image-path}/background.png);
}

But how can I apply a remote url image to the background (saving in the local storage)?

Thank you,

C

2

you have to do this in your angularJS code --> download the remote file and add the styling stuff to dom-nodes with the class scroll-content

3

Ok, I’ve downloaded the image using the plugin:

$ionicPlatform.ready(function() {

if (window.cordova) {
  var _bg = "http://test.com/background.jpg";

  $cordovaFileTransfer.download(_bg, window.cordova.file.dataDirectory + "background.jpg", {}, true)
  .then(function(result) {
    console.log(result);
  }, function(err) {
    // Error
    $scope.showAlert("Error:" + JSON.stringify(err));
  }, function (progress) {
    /*
    $timeout(function () {
      $scope.downloadProgress = (progress.loaded / progress.total) * 100;
    });
    */
  });
}

});

But now, how can I apply the image to the scroll-content?

Thank you in advance!

4
  1. Why didn’t you directly set remote url in css?
  2. If you want to downlaod it first, then you can convert it to base64 string and usi it in ng-src
5

  1. I need to download and save the background to make it work without connection too.

  2. How to do it? Can you help me? I don’t know how to apply it to the class .scroll-content of ionic…

6

You can use cordova-file-transfer plugin to download files:

after that you need to add the background manually or via javascript.

7

Please, read my messages, I am using the plugin, I know how to download, what I don’t is how to apply the local file to the .scroll-content class.

And using using this:


I know I can download files too, but again. I don’t know how to apply the file to the class.

Thank you.

8

like i said you need to set it vial javascript … i think there is no way to add this afterwards --> your DOM is rendered before the download has finished.

Maybe you can use javascript selectors to select all .scroll-content elements and add the background image for those elements.

9

:’-(

Any help, please?

10

you could do something like this:

  1. listen on $ionicView.beforeEnter
  2. there you can do something like this document.getElementsByClassName(’.scroll-content’)
  3. now you can set the background-image for all the elements to your download file.
11

you can use ng-style to set background image once it is loaded.
https://docs.angularjs.org/api/ng/directive/ngStyle

But first convert it to base64

12

Ok, thank you.

I’ve found a way to implement cache using: https://github.com/chrisben/imgcache.js

I’ve applied the image to the .scroll-content:

.scroll-content{
	background-image: url(http://test.com/background.jpg);
}

In my app.js:

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {

ImgCache.options.debug = false;
ImgCache.options.usePersistentCache = true;
ImgCache.options.chromeQuota = 50*1024*1024;     

// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  cordova.plugins.Keyboard.disableScroll(true);
}

if (window.StatusBar) {
  // org.apache.cordova.statusbar required
  StatusBar.styleDefault();
}

ImgCache.init(function() {
    console.log('ImgCache init: success!');
}, function(){
    console.error('ImgCache init: error! Check the log for errors');
});
});
})

And created a directive:

.directive('cacheBackground', function($timeout) {
return {
    restrict: 'A',
    link: function(scope, el, attrs) {      
        // timeout to give time to init imgCache
    	$timeout(function() {
    		ImgCache.isBackgroundCached(el, function(path, success) {
	            if (success) {
	                ImgCache.useCachedBackground(el);
	            } else { 
	                ImgCache.cacheBackground(el, function() {
	                    ImgCache.useCachedBackground(el);
	                });
	            }
	        });
    	}, 200);
    }
};

})

Modified DomHelpers.getBackgroundImage in imgCache.js to use getComputedStyle even when we have jQueryLite:

DomHelpers.getBackgroundImage = function (element) {

    if (ImgCache.jQuery) {
        return element.attr('data-old-background') ? "url(" + element.attr('data-old-background') + ")" : element.css('background-image');
    } else if (ImgCache.jQueryLite) {
        
        var style = window.getComputedStyle(element[0], null);
        if (!style) {
            return;
        }
        return element[0].getAttribute("data-old-background") ? "url(" + element[0].getAttribute("data-old-background") + ")" : style.backgroundImage;

    } else {
        var style = window.getComputedStyle(element, null);
        if (!style) {
            return;
        }
        return element.getAttribute("data-old-background") ? "url(" + element.getAttribute("data-old-background") + ")" : style.backgroundImage;
    }
};

And then I’ve applied the directive to ion-content in my view:

<ion-content cache-background>
</ion-content>

And now the background-image is working offline too.

Thank you Ionic!

13

How do you do this in ionic 2?