I have a dojo animation object of about 15 images. I'm also using dojo.fx.chain to link them all together.
Right before I create all my dojo.fadeIn's and dojo.fadeOut's I added in some basic javascript to preload each image.
My question is: Am I doing this the hard way or is there some function/attr I can set in the animation object to do this?
I do not think there is a predefined method in dojo to preload these images for your animation.
I guess you are listening image.onload and image.onerror events to preload images, it is a common method. If you feel it is too difficult and hard to control, you can try a simple clean css way that is to put an invisible div into your page and set background images with these animation images. When the page load, the images are automatically loaded.
dojo Animations are not specifically geared around images, they work on an abstract level and may operate on DOM nodes. So, there's no built-in support for IMG nodes specifically.
There is dojox.image.preload (http://api.dojotoolkit.org/jsdoc/HEAD/dojox.image.preload) which will do the work virsir suggested of loading images into an offscreen div, but it does not (currently) arrange an onLoad event hook for you to detect when they're loaded and thus play your animation.
I imagine you could use preload()'s return value and use it to hook into onLoad, but that's an exercise for the reader. Have a look at the source code, dojox/image/_base.js.
Related
I m creating a THREE.js (latest version, r71) app, and sometimes I need to manually delete the 3D scene to display classic 2D content. So, what I do is clearing all variables like scene or renderer, and killing the WebGL context using renderer.forceContextLoss()
This method works fine on Firefox or Chrome, but it is not supported on Interner Explorer or Microsoft Edge, which cause multiple lags on my web page. I can't find a workaround to do this properly as I do in Firefox or Chrome.
If someone has a tip, feel free to tell me :)
Thanks
Try using two canvas tags and put one over the other as suggested here,
put them in a parent div tag then use the following css.
position:absolute;
left:0px;
top:0px;
EDIT:
In response to your comment, allow me to clarify my understanding.
You want to draw 2d and 3d.
You are resetting the webGL context.
You can't have 2 contexts to the same canvas simultaneously and I assume you want to use a a different context for your 2d content.
If this assumption is correct:
I am suggesting that you have 2 canvases and contexts simultaneously, one with your webGL context and 3d content, and another with the context you want to use for 2d content. Then you overlay these canvases by using absolute position, such that it looks like there is one canvas.
This means you never have to reload assets to switch contexts, just make sure you so the above canvas is transparent.
Also if you wrap the canvas in a div tag, it will not be at the top left of the page.
But If my assumption is wrong:
perhaps you don't want to use another context and just wish to clear the screen, in which case you should not call forceContextLoss()
If you wish to continue to use the webGL context, but clear the screen you should use clear()
This is quite simple, I want to increase the performance of my page by using canvas to generate diagonal lines pattern instead background-image.
Should I do that? why?
If you're displaying static content, is slower and much more obtuse. and 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?
I have a NSView that houses about a dozen WebViews populated with HTML generated from the application. When I first init them, I wait for - (void)webView:didFinishLoadForFrame: to fire before laying them out and adding them to the view based on the documentView frame.
How would I go about resizing these WebViews along with the window? Is there a way to get the desired size of the WebView for a given width?
Since all you're using the web views for is rendering MarkDown, you should instead investigate MacDown or MarkdownLive. These render MarkDown directly into an NSTextView. This will be MUCH more efficient than multiple WebView objects.
In future, you should ensure that your question includes what you're actually trying to achieve because there's often a simpler way to do what you want than the way you think it perhaps should be achieved.
I'm new to webkit animations and I have been trying out to do this kind of animation
http://demo.jeffrey-way.com/tutsMobile/#site.php?siteName=psdtuts
If you click the list element you will see page sliding in and sliding out.
I want to implement this animation to my app which is built with backbone.js, underscore.js, zepto.js
I could use jqTouch or jquery mobile but I would like to make it as light weight as possible, because I'm building it only for IOS. So thats way I wan't to implement it by my self.
Any hints to make this implementation or should I go with jqTouch?
In this example, there is some sort of (I hate to be vague...) ajax based content loading system. Take a look at the source:
<div data-role="page" id="article.php?siteName=psdtuts&origLink=http%3A%2F%2Fpsd.tutsplus.com%2F%3Fp%3D15026" class="ui-page ui-body-c">
When you first visit, that div doesn't exist. It's created by javascript when content is required, then filled with that content, then translated (animated) into the viewport.
Here is a step by step, deduced from a quick look at the page:
Base page is loaded, including css, javascript, nav list
Script is waiting for a nav item to be clicked.
Upon clicking, an ajax request is made to the content corresponding to the clicked item; determined by href="article.php?siteName=psdtuts&origLink=http://psd.tutsplus.com/?p=15081". My guess? This ajax request is getting content from the same place as psdtuts.com, likely in a database.
While that stuff is loading, javascript shows a loading animation. When loading is complete, it's hidden again.
Once the new content-filled div is created, it is given a default position with its left edge placed right outside of the right edge of the screen. Upon the event of being positioned, javascript then determines the view's dimensions and translates the div across the horizontal dimension. At the same time, the nav list is moved the same direction and distance.
When back is clicked, the view's dimensions are determined again (In case the window size changed) and the nav and content are translated to the right, hiding the content and showing the navigation again.
Repeat
I could be off from how this exact sample is being done, but... Well, this would work.
You wouldn't be that crazy to use a framework for something like this, but I can understand wanting to do a custom job. It would certainly be faster for users, but slower for you. Depending on your intent, that would be just fine.
edit: If you're only serving this to users with webkit, using a framework is even less necessary... If you're not worrying about cross browser support, there's really not a lot going on here that you couldn't accomplish easily with raw javascript.
The only reason I use jQuery for example, most of the time, is to ensure things work alright in most use cases. It just smooths so many things out... Even if 95% of the framework isn't being utilized, it's worth it when you've got a deadline.
I founded out one good example
http://andrew.hedges.name/blog/2009/05/29/animating-your-iphone-web-application
I'm setting up an experimental html5 website using canvas.
I am drawing 3 circles all next to each other and all I want to know is how to be able to select them.
I'd like them to become links, in a way. Not tags, since everything's gonna be created using javascript.
Something like kinetic JS : http://www.kineticjs.com/, but without the extra library.
I have found some scripts that are using ghost canvas and contexts, but the examples are for dragging and stuff. I only want to be able to select my shape and execute some code.
Thank you!
I am thinking you might want to look into the IsPointInPath() method. It will help you figure out whether or not the mouse clicked on your canvas object.
See Detect mouseover of certain points within an HTML canvas?
if you are talented in xml i suggest you to use canvas + SVG (http://www.w3schools.com/svg/)
And follow this simple example.
http://jsvectoreditor.googlecode.com/svn/trunk/index.html
regarding to SVG and Canvas , the differences are obvious, as you can load bitmaps in SVG, and you can draw lines using the canvas API. However, creating the image may be easier using one technology over the other, depending on whether your graphic is mainly line-based or more image-like.