我正在使用 imgcache.js 和自定义指令来下载图像并保存在本地以供离线使用。
图书馆: https://github.com/chrisben/imgcache.js https://github.com/sunsus/ngImgCache/
情况是我需要将背景图像应用于内容(通常我们将背景图像应用于 .scroll-content 类),并且在 css 中我们无法使用指令或服务来保存文件本地。
我知道imgcache.js库有一个名为:ImgCache.cacheBackground()的函数,但我不知道如何使用它并将本地文件应用到.scroll-content。
请问有什么帮助吗?有什么例子吗?
最佳答案
我找到了一种使用以下方式实现缓存的方法: https://github.com/chrisben/imgcache.js
我已将图像应用到 .scroll-content:
.scroll-content{
background-image: url(http://test.com/background.jpg);
}
并创建了一个指令:
.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);
}
};
})
修改了 imgCache.js 中的 DomHelpers.getBackgroundImage 以使用 getCompulatedStyle,即使我们有 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;
}
};
然后我将该指令应用于我认为的 ion-content:
现在背景图像也可以离线工作。
谢谢!
关于javascript - 下载并本地保存背景图像,以便使用 imgcache.js 在 Ionic/Angularjs 中离线使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33295673/