I am trying to understand how to cache an Image url so that it does not need to be redownloaded.
I have taken a look at: https://docs.expo.io/versions/v19.0.0/guides/preloading-and-caching-assets.html
and have been using Image.prefetch like so:
const prefetchedImages = images.map(url => {
console.log('url', url) //this is correctly logging the url
return Image.prefetch(url)
});
Promise.all(prefetchedImages)
.then(() => {
this.setState({loaded:true})
})
This ultimately does set the state as true. I am then rendering my Images in a different component, but I make sure the component that is prefetching does not unmount. I load the url like so:
<Image source={{uri: myImageUrl}} style={{width:100, height:100}} />
When I load images into my grid view, only the local images appear right away, and the ones with URLs are white for a moment before rendering. When using cache:‘force-cache’ on iOS, the images are in fact loaded from cache and there is no lag. I thought I did not need to do that if I used prefetch.
Am I missing something here? I thought I can call my Image source as usual and the system will know how to grab the cached image for that url.
I do not think prefetch is quite as simple as just loading the image from cache just because it is in the cache, if that makes sense.
Check out this thread https://github.com/facebook/react-native/issues/2314 and this question React native Image prefetch.
If you want to save images and have them always available offline look at https://www.npmjs.com/package/react-native-preload-images.
Related
I have been struggling for the past couple of days figuring out a good approach to my problem. I need to display an < Image> component one at a time (Requirement, so ListView is not an option). This component has as source an uri that points to a firebase image. I am trying to prepare on componentWillMount an array that contains all the component Images that will be displayed such as:
let mediaArray = this.props.list.map(function(media){
return <Image style={styles.imageStyle} source={{uri: media}} />;
});
this.setState({list: mediaArray});
However, when I try to display a specific image on that array on the render function I still need to wait a couple of seconds to see the image.
render(){
{this.state.list[currentIndex]}
}
If it was previously prepared, why does it tries to obtain the image again? This suggest that React only looks for the source when is rendering only?
You can say that I am trying to create a "Feed" (Like instagram, facebook, etc), but is not conventional because I need to display one Image Component at a time.
I also tried looking into cache images, but that will not help me because in reality I will be trying to obtain hundreds of images.
you are on the money with the realization that React Native will not fetch the sources for your images until they are rendered. If you want to preload the images you will have to call prefetch on the image source. A simple example using your code would be to modifywhere you create mediaArray to look like this:
let mediaArray = this.props.list.map(function(media){
Image.prefetch(media); // that's it!
// you can now remove this following line and just construct a single image tag later.
return <Image style={styles.imageStyle} source={{uri: media}} />;
});
this.setState({list: mediaArray});
if you want to be a bit more clever you could prefetch only a few of the upcoming images each time currentIndex is updated. If you need more guidance please share more of this component's code.
Hope this helps!
Here is my scenario: On my main view I am loading a list of items. Each item has an imageURL property. I am binding an Image component to the ImageURL property. Everything works well, but the image takes an extra second or two to load during which time the Image component is collapsed. Once the image is loaded, the Image component is displayed properly. This creates an undesirable shift on the page as the image is rendered.
The same images are going to be rendered on 2 other views.
What is the best practice to handle this scenario? I tried loading the base 64 string instead of the image url, which worked, but it slowed down the loading of the initial view significantly.
How can I pre-fetch the images and reuse them as I navigate between the views? I was looking at the image-cache module which seems to be addressing the exact scenario, but the documentation is very vague and the only example I found (https://github.com/telerik/nativescript-sample-cuteness/blob/master/nativescript-sample-cuteness/app/reddit-app-view-model.js) did not really address the same scenario. If I understood the code correctly, this is more about the virtual scrolling. In my case, I will have only 2-3 items, so the scrolling is not really a concern.
I would appreciate any advise.
Thank you.
Have you tried this?
https://github.com/VideoSpike/nativescript-web-image-cache
You will likely want to use a community plugin for this. You can also take a look at this:
https://docs.nativescript.org/cookbook/ui/image-cache
So after some research I came up with a solution that works for me. Here is what I did:
When the app start I created a global variable that contained a list of observable objects
then I made the http call to get all the objects and load them into the global variable
In the view I displayed the image as (the image is part of a Repeater item template):
<Image loaded="imageLoaded" />
in the js file I handled the imageLoaded events as:
var imageSource = require("image-source");
function imageLoaded(args) {
var img = args.object;
var bc = img.bindingContext;
if (bc.Loaded) {
img.imageSource = bc.ImageSource;
} else {
imageSource.fromUrl(bc.ImageURL).then(function (iSource) {
img.imageSource = iSource;
bc.set('ImageSource', iSource);
bc.set('Loaded', true);
});
}
}
So, after the initial load I am saving the imageSource as part of the global variable and on every other page I am getting it from there with the fallback of loading it from the URL is the image source is not available for this item.
I know this may raise some concerns about the amount of memory I am using to store the images, but since in my case, I am talking about no more than 2-3 images, I thought that this approach would not cause any memory issues.
I would love to hear any feedback on how to make this approach more efficient or if there is a better approach altogether.
You could use the nativescript-fresco plugin-in. It is an {N} plugin that is wrapping the popular Fresco library for managing images on Android. The plugin exposes functionality like: setting fade-in length, placehdler images, error images (when download is unsuccessful), corner rounding, dinamic sizing via aspect ration etc. for the full list of the advanced attributes you can refer this section of the readme. Also the plugin exposes some useful events that you can use to add custom logic when images are being retrieved from remote source.
In order to use the plugin simply initialize it in the onLaunch event of the application and call the .initialize() function:
var application = require("application");
var fresco = require("nativescript-fresco");
if (application.android) {
application.onLaunch = function (intent) {
fresco.initialize();
};
}
after that simply place the FrescoDrawee somewhere in your page and set its imageUri:
<Page
xmlns="http://www.nativescript.org/tns.xsd"
xmlns:nativescript-fresco="nativescript-fresco">
<nativescript-fresco:FrescoDrawee width="250" height="250"
imageUri="<uri-to-a-photo-from-the-web-or-a-local-resource>"/>
</Page>
We have set a public folder containing 50 small images of Portable Network Graphics format, basically icons of (45 x 45px) for a toolbar design.
Consider the following Node.js code used for setting public folder using express:
app.configure(function AppConfig() {
app.set('port', 8080);
app.use(express.bodyParser());
app.use(express.errorHandler());
app.use(express.cookieParser());
app.use(express.static(app.root + '/app/public')); // <== contains 50 icons in .png format
app.engine('html', require('hbs').__express);
app.set('views', app.root + '/views/html');
app.set('view engine', 'html');
});
Since first page is Sign-In page always, I want all the toolbar icon images to be cached on first page load itself at background, while user is entering Sign-In details.
While searching how to do it at background, I came across Image Sprite concept. But I require different solution to cache images which are not yet requested.
Could any one put some light on how to do this?
Update: I tried to use tag itself requesting for a single image (.png) which is Image Sprite of all 50 having Size: 0.76MB, now when I load Sign-In page it loads images and then user can see the UI. So the issue is I want it to show UI first and then load the images at background something like AJAX.
You can pre-load your image sprite by inserting it at the most bottom of your Sign-in page & making it invisible. While the browser is parsing and rendering your Sign-in page, it will encounter your image sprite and load it but will not display it. Because it's at the end of the page, it will not interfere with the UI and your users will see the UI first.
<html>
<body>
...
<div style="display:none">
<img src="sprite.png"/>
</div>
</body>
</html>
Or you can load it using JavaScript
$(function() { // when DOM is ready
$(window).load(function() { // when the page is fully loaded including graphics
$('body').append($('<div><img src="sprite.png"/></div>').hide());
});
});
Also, don't forget to instruct express to tell the browser that the sprite can be cached:
app.use(express.compress()); // optional
app.use(express.static(app.root + '/app/public', { maxAge: 86400000 /* 1d */ }));
Server can only serve content which is requested by user. Caching is done by browser to reduce the file transfers (required by the page) and improve performance.
For caching to happen, browser must request the files at least once. Thereafter it checks if the files are updated or not. If file has changed on server the cache is discarded, else it uses the cache. If you want to cache all the images, simply include them in your login page. After that, every request for the files will hit the cache. To know that your file is being cached in node check the logs.
//First access
GET /stylesheets/style.css 200 1270ms
//Thereafter from cache
GET /stylesheets/style.css 304 6ms
Don't worry about caching, let the browser handle it.
How to get all the images, after decoding if possible, on a webpage through XPCOM ?
The image might be specified in HTML as a background url in some CSS property, inside img tag, or in any form that a web developer might have included.
I tried looking into imgIContainer, imgIDecodeObserver and many other interfaces. Although there is a way through which we can provide image URI to Mozilla so that it loads the image, decodes it and returns imgIContainer. But I couldn't find anyway to get all images in current webpage.
This has to be done in either Java or Javascript.
Any suggestions?
#Wladimir - Thanks for your help.
I want all the images including CSS constructs (background images). So now I am listening to events from nsIWebProgressListener.
onStateChange: function(webProgress, request, stateFlags, status) {
if ((~stateFlags & (nsIWebProgressListener.STATE_IS_REQUEST | nsIWebProgressListener.STATE_STOP)) == 0) {
var imgReq = request.QueryInterface(CI.imgIRequest);
if (imgReq)
var img = imgReq.image;
}
}
The problem is that request.QueryInterface(CI.imgIRequest) throws exception for all NON-image requests. Although those exceptions can be ignored by putting code inside try-catch block, but I'd prefer to do things cleanly.
Is there any condition that can be checked to know whether request is for image or not?
There is existing code that you can look at. The Page Info dialog has a Media tab that successfully shows most images on the page. The important function is grabAll() in pageInfo.js, it is called for each element (via a TreeWalker). As you can see, there is no generic way to get the image, this function rather uses window.getComputedStyle() to extract the values of a bunch of the CSS properties for this element: background-image, border-image, list-style-image, cursor. It will also look for <img>, <svg:image>, <link> (favicon), <input>, <button>, <object> and <embed> tags. It doesn't manage to recognize everything however, e.g. these CSS constructs will not be recognized:
.foo:before
{
content: url(image.png);
}
.foo:hover
{
background-image: url(image.png);
}
Still, this is probably as far as you can get - unless you want to look at the requests made by the web page as it loads.
Edit: If you look at the requests as they are performed (via a web progress listener), you can do the following:
if (request instanceof CI.imgIRequest)
var img = request.URI.spec;
Note that request.image won't help you much, almost all methods of imgIContainer are only accessible from native code.
I'm writing a web application that involves a continuous cycle of creating (and removing) a fair number of images on a webpage. Each image is dynamically generated by the server.
var img = document.createElement("img");
img.src = "http://mydomain.com/myImageServer?param=blah";
In certain cases, some of these images outlive their usefulness before they've finished downloading. At that point, I remove them from the DOM.
The problem is that the browser continues to download those images even after they've been removed from the DOM. That creates a bottleneck, since I have new images waiting to be downloaded, but they have to wait for the old unneeded images to finish downloading first.
I would like to abort those unneeded image downloads. The obvious solution seems to be to request the binary image data via AJAX (since AJAX requests can be aborted), and set the img.src once the download is complete:
// Code sample uses jQuery, but jQuery is not a necessity
var img = document.createElement("img");
var xhr = $.ajax({
url: "http://mydomain.com/myImageServer?param=blah",
context: img,
success: ImageLoadedCallback
});
function ImageLoadedCallback(data)
{
this.src = data;
}
function DoSomethingElse()
{
if (condition)
xhr.abort();
}
But the problem is that this line does not work the way I had hoped:
this.src = data;
I've searched high and low. Is there no way to set an image source to binary image data sent via AJAX?
You would have to base64-encode the data into a data: URI to achieve that. But it wouldn't work in IE6-7, and there are limitations on how much data you can put in there, especially on IE8. It might be worth doing as an optimisation for browsers where it's supported, but I wouldn't rely on it.
Another possible approach is to use the XMLHttpRequest to preload the image, then just discard the response and set the src of a new Image to point to the same address. The image should be loaded from the browser's cache. However, in the case where you're generating the images dynamically you would need to pay some attention to your caching headers to ensure the response is cachable.
Try e.g.
this.src="data:image/png;base64,XXX"
...where XXX is your binary data, base64-encoded. Adjust the content-type if necessary. I wouldn't be optimistic about wide browser support for this, though.
You should be able to use data URIs, similar to the solution I identified in an earlier question. Note that this will not work with older browsers.