|
JavaScript - Canvas - Image Loading
So I'm creating a game and decided to use a canvas for the map. The map is a big pictures 500kb+ (6400x6400px) and the canvas size is 320x320 so I am displaying only part of the image at a time and have the page reload on button click for database purposes.
What I'd like help with is performance. Currently it's taking a few secs to reload every time and it seems that it causes some cpu strain (can't switch tabs while loading). Could I stop the canvas from reloading the image each time the page is reloaded and if so then how? Can I make the canvas only load a part of the image, if so then how? If neither is possible any tips, solutions how to solve the performance issues? Similar TutorialsCode:
<html>
<head>
<title>test</title>
</head>
<body>
<script language = "javaScript">
var clouds = [];
var i = 0;
while(i <= 5) {
var cld = new Image();
cld.onload = function()
{
clouds.push(cld);
}
cld.src = "cloud.png";
i++;
}
document.write(clouds.length);
</script>
</body>
</html>
Where am I messing up clouds.length returns 0. Why? I know this is simple, but it will get more complex. I can search for the code, but I would like feedback as to what I'm doing wrong. This is more than likely going to be a multi stage question. More to come... ------ Also, I would like to say that this is my first post. Thanks in advance to those who reply. I found a great little starfield script made with javascript and canvas3d. however i can't for the life of me figure out how to implement a background image inside the canvas. is there some command that tells it to use some feature of canvas, that if otherwise not called, won't allow normal graphics? his whole starfield is generated with a search engine form , and appears to just use a text period to represent stars. here's a link to his script: http://seb.ly/demos/canvas3d/canvas3d2.html how do i get a background image in that? or is it impossible? i tried putting it in the body tag, but it just flashed the background image on the screen for a half a second and then went back to showing only the black background. i tried removing the background body color and replacing it with only background-image ccs, same problem. i tried div positioning it, but the div just covered up the starfield. i want to transfrom image like the picture below using canvas,it seems simple but i find no way to do , can anyone give me some ideas? ( left side is the source) I am very new to javascript(and these forums) and I am teaching my self to use the canvas element. I am trying to draw an image to the canvas but nothing is appearing. And I am getting no error in the chrome console. Can anyone see why? Code:
function RPGanimation(options)
{
this.initcanvas(options);
this.initbackground(options);
};
RPGanimation.prototype = {
initbackground: function(options){
this.background = new Image();
this.background.src = options.backsource;
this.background.onload = this.drawbackground();
},
initcanvas:function(options){
this.canvas = document.getElementById(options.canvasid);
this.context = this.canvas.getContext('2d');
this.dimensions = {width:this.canvas.width,height:this.canvas.height};
},
drawbackground:function(){
//document.write('<IMG SRC="Chrysanthemum.jpg">');
this.context.drawImage(this.background,0,0,this.dimensions.width,this.dimensions.height);
}
};
I create the object in a webpage with the canvas element created just before that script tag... Hello all; I am trying to load four images into a canvas using an array. The images load fine and all, however they are resizing weird. I haven't specified what I want them to resize to, as the actual image are already the sizes I want. However when loaded into the canvas they are sizing differently then their actual sizes. Even when I specify their actual size in the code, they still resize weirdly. Here is my code: Code: <body>
<canvas id="worldscreen" class="map"></canvas><br />
<script type="text/javascript">
function loadImages(arrow, call) {
var images = {};
var loaded = 0;
var num = 0;
for (var src in arrow) {
num++;
}
for (var src in arrow) {
images[src] = new Image();
images[src].onload = function(){
if (++loaded >= num) {
call(images);
}
};
images[src].src = arrow[src];
}
}
window.onload = function(images) {
var canvas = document.getElementById("worldscreen").getContext("2d");
var arrow = {
top: "sideQUEST/images/arrow-top.png",
right: "sideQUEST/images/arrow-right.png",
bottom: "sideQUEST/images/arrow-bottom.png",
left: "sideQUEST/images/arrow-left.png",
};
loadImages(arrow, function(images) {
canvas.drawImage(images.top, 100, 18);
canvas.drawImage(images.right, 215, 36);
canvas.drawImage(images.bottom, 100, 115);
canvas.drawImage(images.left, 36, 36);
});
};
</script>
</body>
You can see the code in action he http://myrmidon16.x10.mx/test.php. This is very frustrating and if you have any suggestions it would be greatly appreciated. Thank you. Hi everyone, I am trying to make an image mask using javascript. The basic idea is that the image on the canvas will appear as a black box. When the user hovers over the image a small part of it is revealed. I have attached a picture as an example because its quite hard to explain! Any help would be appreciated! Thanks, Luke Okay, so I have a canvas, and I want the user to be able to copy an image url and paste it into an input box, that will then set it as the canvas background image. Does anyone know how I can do this? I was thinking about using the OnChange method in the text input, but I cannot find any help with that online. My current Canvas Background is (In <head><script>) Code: var imgObg = new Image(); imageObj.src = "images/bg.png"; And my text input is Code: <form name="input" action="" method="get"> <input type="text" id="textboxBG" onchange="??" /> <input type="submit" value="Submit" /> </form> If you need more code, or would like to help me out more in depth, I would gladly paypal you a little money. I know this can't be too difficult! I REALLY want this done! Hi I have a script which dynamically adds contents to an HTML table using the jQuery's .after();... Now the problem the content is a bit too much and some times IE would crash, so I thought if a loading image would solve this issue? Any ideas? Thanks in advance Hi, I want to load an image when a user clicks a link on my page. The image is a tracking pixel for an affiliate network, so it doesn't need to be visible to the user (as it's not an image anyway but a php file). I assume this would use the onclick event. Can anyone help? My goal is to replace a 300px x 300px div with a random assortment of pictures, all being 300px x 300px. I however am not that great at JavaScript (I've taken a bigger bite than I can chew) and would love your guys' help. So far this is what I have for my JavaScript: Code: begin();
function begin()
{
setTimeout(newimage(),7000);
}
function newimage()
{
}
Which brings me to my first question: What's the best method of pre-loading images? And also, if the method is not through JavaScript, how would I reference the image from the JavaScript? My next step would be to transition between images. (Fading specifically.) I really like the fade transition here and I plan on using that in the site. How would I incorporate that into my code? I noticed he made the entire JavaScript code into one line, which is quite annoying. Thanks guys! ok. so i have all these big images and i need to let the whole page load before the viewer sees it what i would like is for a separate url (or something to completely cover the html page so you cant see it loading) to say please wait or something like that. Help! Basically I want an effect like this: http://www.appelsiini.net/projects/l...ed_fadein.html Where the images on the page fade in as the user scrolls down. I implemented the code on a page, he http://www.jamiewebster.co.uk/orca.html Now, I have a couple of issues with this. First issue, it works in FF but it doesn't seem to work in Chrome. Second issue, I can see the alt text of the images below just above the fold of the page before the image loads (I guess it depends on your monitor size on wether you'll see it or not, but its still a problem!) Thirdly, it seems that once the images have loaded, if you scroll back up you no longer have the fade effect and it only happens once (unless you refresh the page) - would be good if that effect could happen every time you scroll. Any ideas, or if there is better code out there? Thanks in advance!! Hi! i am working on a facebook like photo viewer. I have used javascript to declare an array of about 200 images. I have the following approach to pre-load the images. I preload all the images when the page loads: HTML: <body onload = "lodpic()"> JAVASCRIPT: function lodpic() { for(i=0; i<=199; i++) { LODImage = new Image(); LODImage.src = picture[i]; } } The problem is the page tries to load all the images when opened. And when the user clicks "next" to view other photos, the other photo is still loading where as some are already loaded. I would like the code to be able to load the photo that the user is currently viewing as the user gets to that picture, before the page tries to finish loading all the photos. In other words, if the user wants to view a particular photo directly, that photo should get the priority of loading quickly. Or if there are other approaches, it would be really helpful. Thank you! Hi, I am using a slideshow and want to basically have an 'image loading' whilst all the images load before the slideshow. Is there a way to do this? So far I have figured the best way around this is to have a GIF as a background image that says the loading message, and then once the slideshow loads over the top its fine, however im guessing this is'nt the right way to do this. I am using this slideshow set to just loop: http://www.dynamicdrive.com/dynamici...lslideshow.htm I am open to using other similar slideshows if there is one more suited. Thanks Hi , Pls solve it Javascript problem. I have a page called gallery.html in which we have photo albums.when u click on one of the photo albums opens up all images belongs to that album on same page ( javascript). when click on one of the images it has to open up in a popup ( including other images) which is happening but the probleem is that when u close popup and again click on same images popup is happening but images are not loading. what might be the problem ..pls solve it .......its too urgent thanks in advance nagaraja kharvi I have a form that used php to load a random image but now i would like to use javascript instead and am sure I nearly have it. I need to have a random number between 0 -5. Here is my code Code: <script type='text/javascript'>
var random = Math.floor( Math.rand() * 6);
document.write("<img src='images/'"+random+"'.jpg' alt='random image' /><input name='image' type='hidden' value='"+random+"' />")
</script>
SOS, and thank you in advance. I've been going over the links, html and .js & .css files for a couple hours now and can't find the glitch... the images are supposed to just cross fade and replace each other within the container space (sample at http://slayeroffice.com/code/imageCrossFade/xfade2.html), but are loading in a vertical column and then behaving strangely, making each one disappear as the cross fade occurs... even after a full cycle, it loads the next image on the list below the current. LINK to problem page/code: http://www.led-z.com/ Hi, I am an asp.net developer and I wanted to display user popup (kind of) which freezes the screen so that user won't click anything else on the screen. There are some predefined controls in asp.net, but I wanted do this using Javascript. Where can I find a sample with code? Thanks Hello. I've recently implemented this really cool jQuery preloader called queryLoader. When a visitor comes to my site they are fed all the important images for the entire site (it's a very small site). During that time queryLoader shows a percentage loading animation, and once all the images are loaded it wipes the screen & displays the website. I've placed another custom animation in the "page loading" div, and i want to make sure it loads first so that it is displayed while the rest of the images get downloaded. I've tried pre-loading with javascript as the very first script in my header, before jQuery or queryLoader get loaded, like this: Code: <script type="text/javascript">
pic1= new Image(250,300);
pic1.src="images/page_loading.gif";
</script>
<script type="text/javascript" src="scripts/jQuery.js"></script>
<script type="text/javascript" src="scripts/queryLoader.js"></script>
However, this doesn't seem to be that effective. When i clear browser cache and reload the page, the page_loading.gif sometimes doesn't appear until the site is almost completely loaded. Is there a more effective way to assure the page_loading.gif gets loaded before any other images? My site is jugtones.com if that helps in any way. Thanks for your time, -Scott When performing an Ajax request I want to change the submit button into a loading image and then swop it back again when the Ajax request is complete. I don't want a loading image anywhere else as on mobile phones it can't always be seen due to small screen size. I have grabbed the event (which references the form, is that right?) and I have something like this: Code: <button type="submit" name="name_can_vary">Search</button> event.name_can_vary.style.visibility = 'hidden'; //(obviously this isn't complete code but no doubt explains what I am talking about) ..which would hide the button and works exactly as I want to this point, but of course it does;t return when Ajax has completed or show the loading image. Ideally, instead of just hiding the button I want JavaScript to swop the button for the loading image. I suppose I could have extra HTML on every page that is made visible with the loading image but I would rather have JS do everything from here (saves editing all pages with submit buttons on). Thanks for any help. |
|||||||