Download and save a background image locally to use it offline in Ionic/Angularjs using imgcache.js

Question

I am using imgcache.js and a custom directive to download images and save locally to use it offline.

Libraries: https://github.com/chrisben/imgcache.js https://github.com/sunsus/ngImgCache/

The case is that I need to apply a background image to the content (normally we apply a background-image to the .scroll-content class) and in css we can't use the directive or the service to save the file locally.

I know the imgcache.js library has a function named: ImgCache.cacheBackground(), but I don't know how to use it and apply the local file to .scroll-content.

Please, any help? Any example?

Answer 1

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);
}

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:

And now the background-image is working offline too.

Thank you!