i am currently building a mobile app and i'm just wondering if it's better (performance wise) to use canvas or img tags. i'll be querying my website for the actual image. just wondering if there is a benefit of one over the other.
The main benefit is to avoid unnecessary browser decode.
For browsers to paint an image onto screen, they would need to:
Retrieve the encoded contents of the image file
Decode the image from its original JPEG, GIF, PNG or WebP format to a bitmap in memory
Paint it onto the screen
Performance issues arise when users scroll and resize. Decoding is particularly expensive. Yet when we scroll up and down the page, browser would attempt to retrieve the memory previously occupied by off-screen images (that is, the content outside of the current scroll region). This means that whenever an image reappears from the edge of the screen, the browser would have to go through the same expensive decoding process all over again. When we have a lot of images splashed over a long page, the browser would likely stutter on scroll.
What's different about canvas: browser doesn't recycle the decoded information inside of canvas. So by using canvas to render the image, we avoid unnecessary decoding.
But of course, if I'm targeting mobile devices, I'd switch back to image tags and let browsers do their job since memory is scarce.
I think this is a browser-specific tactic to deal with the conflict between decoding images and limited memory. I was talking about Chrome more specifically, since the process is visible in the Timeline dev tools.
No! If you're displaying static content, <canvas> is slower and much more obtuse. <canvas> and <img> do completely different things, the former being for dynamic graphics using JavaScript and the latter being for static images retrieved from a URI.
Browsers tend to be optimised for loading IMG sources while the HTML is streaming: so you'll see an image before the page has loaded completely. Canvas, on the other hand, will be dependent on the DOM being loaded, so (typically) won't load until the DOMContentLoaded event has fired. Add to that the latency in creating a Canvas context and the memory requirements and it almost certainly isn't what you want if the images are truly static.
If you want to do something fancy with the image why not load the image in an IMG tag and then convert it to a canvas once loaded to do the transformations?
Related
I have a GIF that I will use in a React web app I am building. I want to be able to step through the animation based on the scroll position of the site.
I.e. when I have scrolled through 50% of the page, then I want the gif to display the image at its 50% position.
The gif will be in a div, position:fixed. So it will always live in the top corner of the browser.
The web app is a react app so if it's possible that there's a react library that implements this then that would be great.
Thanks!
There appears to be at least one ready made React implementation for dealing with the interaction with/playing of the GIF that may be able to assist you in your project.
React Gif Player is a React component which creates a GIF player similar to Facebook's implementation. It also comes with a pause function (and an example), which you may be able to use to programatically pause the GIF at corresponding points based on your scroll position.
Gif Frames is a pure JavaScript tool for extracting GIF frames and saving to file. You may be able to create individual frames and correspond frames with certain points of the scroll.
I'm not aware of a gif player that implements exactly what you were hoping for, although others may be able to assist in this regard. If not, you may have to use a combination of, or do a full implementation yourself.
Hopefully this helps.
We are developing a WPF application, mainly using the WPF Bing Maps control.
We have multiple tile layers which can be turned on or off at runtime. The tile layers retrieve their data using a custom tilesource, so we have more control over the uri returned.
When the application starts multiple tilelayers are visible, causing calls to our restservices to retrieve the tiles. The services check the DB for images, if present, return the images, if not, generate the images, store them, and return them. So far it works like a charm.
Now the following 2 cases: DB gets cleared for some reason -> Services just recreate the images when the calls are made, and returns them. No problem here.
If someone clears the IE cache (client side), while the application is still running, zooms / moves around the map. The tiles loaded before disappeared, and are not coming back. When zooming in further, it does retrieve tiles that were not loaded before, but leaves us with big gaps in the tile layer(s).
Only way to solve this seems to be to close the application, clear IE cache, clear DB, and start again. What causes this behaviour? And why are, seemingly empty, images loaded?
After some digging around an option would be to give a tick parameter to the uri, so it will always retrieve new tiles. But this has a major performance penalty.
Any advice on how to solve this problem?
Thanks in advance.
The tile layers in WPF cache the tiles and pulls the tiles from the cache if it has already loaded it once. If the cache is cleared then those tiles will not be reloaded. This is by design for performance. Especially for tile layers that do not have all possible tiles. There is no way around this.
I'm retro-fitting a website for Mobile First Responsive Design (MFRD). My question is - how far do you go with the "Mobile First" part?.
For example - on the homepage I plan on having a list of upcoming events, say 4 or 5. On the mobile version I thought 2 would be enough to save screen real-estate. Should I load the other events in dynamically for the larger views, or should I just hide them since it will only be a few elements anyway?
Loading them dynamically for larger sizes means I have to attach an event to the window resize which typically gets fired every pixel. Even though I can offset that with Timeout, that's still a lot of client side checking is it not (even though it's not like users are constantly resizing their browsers).
I mean, even though you're designing for mobile first, you also have to consider the larger sizes right? Obviously larger JavaScript libraries and other assets that are needed for larger only you want to pull in later and not load for mobile - but how crazy do you want to get with the bandwidth saving?
What is the target market for the website? Are you making a completely responsive website that encapsulates smartphone to desktop? Or are you just concentrating on smartphone to tablet?
Mobile First really just means start your styling and content views at the smallest form factor and work up as the device dimensions get bigger. HTML, CSS (media queries) and jQuery all play a part to expand the UI and manipulate (show/hide) content elements as the browser gets bigger.
Take a look at Smashing Magazine, their responsive layout is one of the most extensive I have seen so far, it will give you an idea of how far you can take the MFRD or DARL (Device Agnostic Responsive Layout) methodologies.
I am trying to build an application which serves images to a Deep Zoom MultiScaleImage dynamically. For example, when an image for a particular corner of the large image is requested, that image should be rendered automatically.
Rendering is what I will implement. But my code needs to be called when the MultiScaleImage requests that corner of the image. How do I implement this?
When I search on StackOverflow for this, I get results that explain dynamic generation of deep zoom images using DeepZoomTools. I am not entirely sure, but this is not I want. I want to generate images only when requested individually and not generate all of them on the fly.
EDIT: Let me give you an example that will explain one of the possible solutions to this, which I don't know how to implement.
If the MultiScaleImage requests the image 5/1_0.png, which if you know Deep Zoom will be the first image in the second column of the large image at 5th zoom level (not related to the real zoom value in deep zoom). When the DeepZoom requests this file, I want to generate it looking at the parameters I have, which are "5", "1", and "0".
#Salil: will do.
You could use routing (e.g. https://web.archive.org/web/20211020111718/https://www.4guysfromrolla.com/articles/012710-1.aspx) to direct the request to a Web Generic handler. Note that a generic handler is a bit more suitable than an aspx page as it doesn't have to do so much work with a page lifecycle.
I have an app that show a list of images. The image source is set to a http URL, and the images are downloaded and display automatically.
However, while the app is taking time to download, the image control shows nothing. The user experience is not good this way.
How may I display a loading placeholder image, or a loading gauge, for each of the image control?
While an image is loading, it is drawn transparently. You can use this to your advantage to display an element underneath the image while it is loading. For example, you could have a stock image that is bundled with your XAP that represents a default avatar for example. Or you could display a XAML loading animation. Then when the image is finished loading, it will obscure the element behind it.
Mick's suggestion is a good one if you need to minimize your visual tree and if your scenario allows for a code solution. This suggestion is not perfect but it does make it easier to deal with the case where your placeholder image is unscaled/centered but the loaded image is scaled/stretched.
You could set the image source to your placeholder then when ImageOpened fires, change it to the remote url and let that run it's course.
In addition to the 2 other suggestions (from Josh & Mick) you could display a placeholder in the xaml and then, in code, download the actual desired image in the background using HttpWebRequest. Then when the image has fully downloaded save it to isolated storage and then update the source to the displayed image.
Yes this is more complex than the other solutions but would simplify the visual tree and avoid a blank image being displayed while the image is downloaded.
It would also give you offline caching of images too.
Interesting how many options there are for tackling this problem.
You might also like to consider Ben Gracewood's image caching implementation or what appears to be a development on that idea in his blog comments.
One-time Cached Images in Windows Phone 7 « Ben.geek.nz
Peter Nowaks Mobile Blog - “Intelligent” Image Caching for WP 7
Some background on the discussion leading up to this here if it's of interest.
Image control cache duration?