I'm trying to do something simple to practice my Javascript (which I learned some recently) and I'm trying to do a game on it (pacman to be precise).
I am trying to build that game board on the browser by creating images dynamically. I've done an array like this:
var images= new Array(25);
for(i=0;i<25;i++)
images[i]= new Array(25);
And, for the game board I used a matrix done with 0 and 1's with 25x25 size (not going to post it here cause is too big and would make my text hard to read) called board.
For the images that I am using right now I have something like this:
var image_empty = new Image();
image_empty.src="Images/empty.jpg";
var image_wall = new Image();
image_wall.src="Images/wall.jpg";
For the initialization function I have something like this:
function drawField()
{
for(i=0;i<board.length;i++)
{
for(j=0;j<board[i].length;j++)
{
if(board[i][j] == 0)
draw(i,j,image_empty);
else if(board[i][j] == 1)
draw(i,j,image_wall);
}
}
}
And for drawing the images themselves I am using this:
function draw(x,y,img)
{
images[x][y] = new Image(22,22);
images[x][y].src = img.src;
images[x][y].style.position = 'absolute';
images[x][y].style.left = 40+x*22;
images[x][y].style.top = 40+y*22;
}
Every time I run this code nothing appears on the screen. I've tried several times use a load of things but nothing happens. I am saving the pictures (at least I think I am) and still nothing.
Can someone give me some pointers of what could be wrong?
PS: Some people pointed me out using the appendChild method would solve the problem, still, since pacman will be moving around I can't use it to store my images (and I was planning to use the draw function to draw anything).
And btw nor Web Developer plugin or firebug point out errors (the code is correct from their perspective).
Creating an Image in the method you describe doesn't actually display the image. Even putting attributes and styling to make it appear a certain way doesn't add it to the DOM. The advice about append child is correct. For example, if you had:
<div id="main"></div>
and you called
document.getElementById("main").appendChild(images[x][y]);
this would insert the image inside the div. You could do this repeatedly to generate the equivalent of...
<div id="main">
<img src... />
<img src... />
...and so on
</div>
Then, your CSS styling and positioning would work.
There's nothing wrong with your script, but Firebug does display a rendered version of the DOM. As you run the script, you will actually see the HTML tab of Firebug changing with the images you've added to the page.
Also, keep in mind that the DOM must complete loading before you are able to run this. You can accomplish this by doing a simple:
<body onload="drawImages()">
UPDATE: Once you've actually added the 25x25 images, the array still references the elements - they're just now part of the DOM. So, you can change their source via:
images[x][y].src = "newImage.jpg";
If you, for some reason, wanted to remove an image from the board, leaving a gap, you can remove it from the DOM
document.getElementById("main").removeChild(images[x][y]);
or just hide it via CSS.
Related
The purpose - an image gallery.
As opposed to creating each gallery-image inside a 'gallery' div, like below:
<div id="html_collection">
<img src="picture_1">
<img src="picture_2">
<img src="picture_3">
</div>
I'm storing them inside a javascript array object - for simplicity, like below:
var js_collection = [
{
'gallery' : 'picture_1.jpg',
},
{
'gallery' : 'picture_2.jpg',
},
{
'gallery' : 'picture_3.jpg'
}
From there I will create an empty <div id="carousel"></div> inside the HTML file and append each 'gallery' image into it dynamically through JS, by clicking 'next' and 'previous' buttons. These buttons will cycle through the js_collection array.
For example:
function showCarousel(x) {
var slide = document.createElement('img')
slide.src = js_collection[x].gallery
var output = carousel.appendChild(slide)
}
The concern - I feel like redrawing the img node and fetching the current img from the JS collection everytime we hit next or previous.. may be dirty in a way. I know the same result can be achieved by showing and hiding imgs in the first 'html_collection' option - but I prefer the flexibility of the second implementation. Can I get away with it, or is this just wrong?
EDIT: I went with Leeish's suggestion and created a div like so,
<div id='carousel'>
<img id='carousel_slide' src='nameOfFirstSlideHere.jpg'>
</div>
From there, I dynamically switched the img 'SRC' rather in redraw the 'IMG' itself each time. Cheers
My concern about your script approach is that the user may experience a noticeable delay upon every click of the next/previous button while waiting for the next image to be retrieved, at least as your script is currently written. On the other hand, if the number of images is large, there would be a significant up-front delay in the HTML version as you waited for the entire group of images to load.
I think the best solution would be one that preloaded at least enough images to make sure that when the user clicks the button, the next or previous images is (at least usually) already loaded so the only delay is the tiny one to append the content. If your images are small, you might consider using CSS sprites to load several images at once and cut down on the number of HTTP requests, though this would require a bit more coding.
The other option, which is simpler to code, but doesn't reduce the number of image requests, would be have your showCarousel method create an image object, load the src, and append to the carousel for image x + 1, but hide that image x + 1 initially and show image x. That way, assuming the user spent a few seconds looking at each image, the user should see image x essentially immediately, while x + 1 gets ready just in case the user asks for it.
I think this is a very simple question, so forgive me if it's been answered elsewhere. I looked but wasn't able to find what I was looking for. I have very little experience with JavaScript.
I have a many simple JavaScript slideshows contained on a single page that advance via a mouse click. See below for the code I'm using, which I've lifted from one of the introductory JS sites. This preloads each image from each slideshow when a user visits the page. I would like the script to NOT preload each image, and instead load the next image only when the user clicks to advance the slideshow. This is to reduce load time, since most users will not encounter most images. Is there an easy way to convert this into something that doesn't preload each image?
<SCRIPT LANGUAGE="JavaScript">
var i=0
var imgs=["/a.jpeg","/b.jpeg","/c.jpeg","/d.jpeg","/e.jpeg"]
function slide(){ {i=i+1} {if (i==5) {i=0}} {document.img.src=imgs[i]} }
</SCRIPT>
And the code for when the slideshow is called:
<IMG SRC="/a.jpeg" NAME="img">
Thanks!
- Patrick
Images start to load once they have a src attribute set, unless (unofficially) the element's css display property is set to none.
So, as long as you don't set the source of the img element or JS Image object, as appears to be the case in the code you posted, the image will not start loading.
Using you images array,
var imgs = ["/a.jpeg","/b.jpeg","/c.jpeg","/d.jpeg","/e.jpeg"]
You can do this:
function preloadImages(){
for(var i=0 ; i<imgs.lenght ; i++) {
img = new Image();
img.src = "img/" + imglist[i];
}
}
This function will preload all those images, so when you do the slide() the images are in browser cache.
This method doesn't work in all browsers, so when I need to do this trick, I also use a div with the size of 1x1 pixel (positioned outside the view) with all the images, like this:
<div>
<img src="/a.jpeg" />
<img src="/b.jpeg" />
...
</div>
This will also load all the images as soon as possible...
Ah, thank you all for your responses. They've led me to my answer, which is just that I made a very silly mistake. I misunderstood the results from my website's analytics test, which seemed to indicate that all images were being downloaded into the cache. This was just a goofball misreading of the results that led me on a wild goose chase, which was sustained by my lack of JavaScript understanding. I realized it after going back to the test to respond here. It all behaves as I intended with a minor adjustment. Thank you!
I have a couple of divs with background images. I would like to know how I can preload those background-images with a gif image since some of the background images are quite large. Doing the following does not work:
HTML:
<div id="glykopeels" onload="loadImage()">Glykopeels Content</div>
<div id="facials" onload="loadImage2()">Facials Content</div>
CSS:
#glykopeels{
background: #ebebeb url(http://lamininbeauty.co.za/images/products/preloader.gif) no-repeat top right;
background-size: contain;
}
#facials{
background: #ebebeb url(http://lamininbeauty.co.za/images/products/preloader.gif) no-repeat top right;
background-size: contain;
}
JS:
function loadImage(){
document.getElementById('glykopeels').style.background = '#ebebeb url(http://lamininbeauty.co.za/images/products/glykopeel.jpg);';
}
function loadImage2(){
document.getElementById('facials').style.background = '#ebebeb url(http://lamininbeauty.co.za/images/products/facial.jpg);';
}
I guess defining a different ID for that element in the onload function and defining css for that new ID is another possibility? Thus changing only the id of that element inside the onload function?
Thank you
First: there is no onload attribute for div's. EDIT: please read comments below, very interesting!
Secondly, you should place the url between quotes (escaping them if needed): url('http://lamininbeauty.co.za/images/products/facial.jpg')
Third, there was no image called preloader.gif, yet there was a image called loader.gif, so I used that one to 'fix' your css part for my solution in the jsfiddle demo link at the bottom.
During SO's server-move, I wrote a simple custom function for you that does exactly what you want.
Tested in IE6 and FF12.
To test this: please clear your browsers buffer, otherwise you can't SEE it in action (it would go too fast), since the images will probably be buffered on second view (again, perfect for your goal)!
JavaScript:
var repBg=function(a, t){ t=t||'*'; // by GitaarLAB
var c=document.getElementsByTagName(t), i=c.length, r=[];
while(i--){if (c[i].getAttribute(a)){r.push(c[i]);}} c=r; i=c.length;
repBg.exec=function(){
c[this['data-i']].style.background="#ebebeb url('"+this.src+"') no-repeat top right";
};
while(i--){ if (c[i].getAttribute(a)) {
r=new Image();
r.onload=repBg.exec;
r['data-i']=i;
r.src=c[i].getAttribute(a);
}}
};
// one could run repBg onload, but better to run it when the image has actually loaded, see html!
// window.onload=function(){ repBg('data-bg_img','div'); };
In your BODY: Add the attribute 'data-bg_img' (as per html5 convention, start with data-) to the elements you want to use this technique on and have it contain your background url, like this:
<div id="glykopeels" data-bg_img="http://lamininbeauty.co.za/images/products/glykopeel.jpg">Glykopeels Content</div>
The 'optional' initialization in your BODY:
<!--
trigger the replace background function when the loader image has actually loaded!
rewriting the onload with nothing to prevent infinite loop in IE6 (and greater?) !!
-->
<img src="http://lamininbeauty.co.za/images/products/loader.gif" style="display:none;" onload="this.onload=null; repBg('data-bg_img','div');">
Manual/explanation:
Images DO have a onload-event, so we place a loading-image in the html (at the bottom), that will trigger it's own onload-event, calling repBg() as soon as the browser has actually downloaded this loading-image!!!
The function repBg() takes up to 2 arguments:
the first mandatory string that contains the attribute that should be selected,
the second optional argument can define tagname (to limit the first argument).
When invoked, function repBg() will then search the body for elementTagNames that adhere to the second argument or * and then filter them with the first argument.
For each htmlObject that remains in the filtered htmlObjectCollection, a new image is created (not appended to the body) with the htmlObject's attribute-value (url) corresponding to the function's first argument as image-source, together with the htmlObjectCollection's referring id (attribute data-id) for reference.
As soon as these images load, they fire their onload event: calling repBg's exec method that replaces the background of the referenced htmlObject with the new freshly loaded (big) background-image (and the rest of your css). For further modularity you could expand on that function.
Lastly, note: the background images load in order they appear in source, aka the way you expect things to work!!
You can see it in action in this fiddle: http://jsfiddle.net/epdDa/
UPDATE VERSION 2: GRACEFUL FALLBACK!! AND COPY-PASTE NOBRAIN SOLUTION
It annoyed the living daylights out of me that my first solution did not provide graceful fallback. So I made a different solution that provides graceful fallback.
Also fully tested in IE6 and FF12
It works like this:
In your BODY: SIMPLY set your div's class to 'preload' and set it's style-attribute to the backgroundimage it should normally load. Like this:
<div id="facials" class="preload" style="background: #ebebeb url('http://lamininbeauty.co.za/images/products/facial.jpg') no-repeat top right;">Facials Content</div>
That was easy right?
Then place the following script in the HEAD (this is important) of the HTML:
// getElementsByClass original by dustin diaz, modified by GitaarLAB
document.getElementsByClassName=document.getElementsByClassName||function(searchClass,node,tag) {
var classElements = [], i=0, j=0;
if (!node){node = document;}
if (!tag){tag = '*';}
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');
for (; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i]; j++;}
} return classElements;
};
var repBg=(function(n,u,p,a,i,r){ // by GitaarLAB
window.onload=function(){repBg(1);};
i=new Image(); i.onload=function(){this.onload=null; repBg(2);};
document.write("<style>."+n+"{background:"+p+" url("+u+") "+a+
" !important; background-size: contain !important;}"+
"</style>");
i.src=u; r=0;
return function(t){
r=r+t; if(r>2){
var c=document.getElementsByClassName(n), i=0, l=c.length, s;
repBg.exec=function(){
document.getElementById(this['data-id']).className='';
};
for(;i<l;i++){
r=new Image();
r.onload=repBg.exec;
r['data-id']=c[i].getAttribute('id');
s=c[i].getAttribute('style');
try { // sane browsers
r.src=s.match(/url\('?([^'"]*)'?\)/i)[1];
} catch(e) { // <IE8
r.src=s.cssText.match(/url\('?([^'"]*)'?\)/i)[1];
}
}
}
};
})('preload','http://lamininbeauty.co.za/images/products/loader.gif','#ebebeb','no-repeat top right');
Explanation:
It took me all night.. but I found a way.
If javascript is enabled, function repBg will start by writing an extra style-block to the documents head (where it is located, note to place it after your last css script), that sets the loader-background-image for all elements with the class 'preload' (thus displaying the load-image at pageload).
If a load-test image for the loading-image is loaded AND the window is loaded (to get to all the elements in the body), then it does basically the same as version 1. Only this time we fetch and match the url from the element's style-atribute and onload subsequently empty the element's style-attribute.
Since this function auto-executes and overwrites itself with a version similar to version 1 (as above), you can simply adjust parameters at the last line of function 'repBg'.
Note that: in it's initial sate repBg accepts a maximum of 4 arguments: className, Url, cssPrepend and cssAppend.
To see it in action (don't forget to clean your browsers buffer as explained),
click this fiddle: http://jsfiddle.net/epdDa/1/
Whoever uses this function, I would greatly appreciate it if you credit me!
UPDATE:
Extra explanations and answers to comments.
Main differences between the 2 versions
Technically both versions use almost the same techniques so there is no real difference there.
With version 1 the javascript is the glue that IS NEEDED to make the page work, but works in valid true xhtml and plain html.
However, people with javascript turned off will get a nonfunctional site (with only loading-gifs displayed). Note that all other current answers, including the direction you where going, suffer from this problem!
With version 2 the javascript is only the spice that enhances the page-interaction (the way websites should be coded), but only works in html (or invalid xhtml).
However this should make sure that people with javascript turned off still see a normal functioning page. IE: javascript is NOT NEEDED to display the site correctly. This concept is called 'graceful fallback' or 'degrading gracefully'. My vote no 1 for version 2.
Extra bonus: this path gives you plain vanilla validating and SEMANTIC html since you use ancient trusty in-line style, id and class. My vote no 2 for version 2
Why did I choose to use in-line css? Why 'must' you use in-line css for this to work?
First of all, I spent hours to avoid in-line css. (I did not loose them, I learned way's that did not work, just as useful). Next, I want to point out that again all current answers including the direction you were going, had the actual background image url separated from the css, while in the css you were setting the loader image on each div separately, something where a class would have made more sense. Version 2 simply uses a configurable classname.
Both reading and writing css blocks in the document's HEAD is kind of a mess..
And did I mention linked external css files..??
In my opinion, all this would need so much extra code and cpu-cycles AND blocking/halting the browser on every pageload, in order for the core-priciple to work: the last valid css-rule applies. So the loading image is displayed as soon as possible since it is the specified background image at pageload, exactly what one would want from such a feature. And if the element is no longer part of the 'preload' class? Right: it's inline css takes effect, updated as fast as the browsr can render (if the image is already loaded). Nice.
So if you sacrifice (true) xhtml-support by simply using document.write, it currently still turns out this way is the 'best' way to go (as you can read in the previous 2 links). AND it would still work with an external linked css. My third (KISS-)vote for version 2.
My fourth vote for version 2 is because: the repBg function is prepared to have it's exec method(=function) 'upgraded' so you can only take out the 'preload' value from the class' valuelist. A simple replace() would suffice (currently left out for speed).
My fifth and final vote for version 2 is that because of it's graceful fallback setup, it is also relatively easy to fix for or block some browsers to use the extra 'spice'.
Finally, as for speed: I think version 2 will always feel snappier: onload-image is displayed almost as fast as the browser can fetch it (as if this extra css was always there to begin with), the loading-animations load snappy since: their load is already initiated in the head, and the browser will not download the overruled images until called for by the function. Plus they look interactive without distraction. But.. when the actual background images are loaded and the css updates: bam! the image is there, without the top-to-bottom-scanning'-effect'. That effect feels damn snappy to. Actually I'm convinced and will be doing an adaptation for images in the galary, for the snap-feel and increased perceived initial pageload.. Note, this is my opinion. Your mileage may vary haha.
Good luck!!
(and please vote if you like/use this idea/function, thank you!!)
1) div elements doens't have a load event, this event is only for body, images and script tags.
EDIT: Like pointed by #icktoofay, in the HTML spec the onload exists for all elements, however this is not supported by the major browsers (yet).
2) place this script tag at the end of your html page:
<script>
function loadImages() {
var glykopeels = document.getElementById('glykopeels');
var facials = document.getElementById('facials');
glykopeels.style.backgroundImage = 'url(http://lamininbeauty.co.za/images/products/glykopeel.jpg)';
facials.style.backgroundImage = 'url(http://lamininbeauty.co.za/images/products/facial.jpg)';
3) You can set style.background like you did, but do not put the ; at the end of the string, otherwise it will not work.
fiddle: http://jsfiddle.net/pjyH9/
EDIT
Seems like the loader image does not show because once the browser receive the first bytes of the new image it removes the loader.gif from the background. Let's take another approach.
Here is a function that will load the image to cache and then - when image is loaded - set the image to the background of the element with the specified id.
function loadImageToBackground(elementId, imageUri) {
var img = new Image();
img.onload = function() {
document.getElementById(elementId).style.backgroundImage = "url('" + imageUri + "')";
};
img.src = imageUri;
}
The on the elements that you want the loader:
// past the element id and the image url to the function
loadImageToBackground('glykopeels', 'http://image....');
I'm pretty sure that this will work. The function loadImageToBackground do the basic work, you can extend and add more functionalies if you want.
Here is fiddle with a working example: http://jsfiddle.net/pjyH9/19/
(It loads 2 images with 1.5mb each, so you can see the loader in action).
I think what you're trying to do is get the background image to switch out to the big JPG image after it's loaded. You should be able to adapt something like this to work for you:
<html>
<head>
<title>Image Load Test</title>
<script type="text/javascript">
function loadImage(preloader, imageDiv) {
document.getElementById(imageDiv).style.background = '#ebebeb url('+preloader.src+') no-repeat top right';
// I think resetting the background property also resets backgroundSize.
// If you still want it 'contained' then you need to set the property again.
document.getElementById(imageDiv).style.backgroundSize = 'contain';
}
</script>
<style type="text/css">
#testImage {
background: #ebebeb url(small-image.gif) no-repeat top right;
background-size: contain;
}
#preloads { display: none; }
</style>
</head>
<body>
<div id="testImage">Some Content</div>
<div id="preloads">
<img src="full-image.jpg" onload="loadImage(this, 'testImage')">
</div>
</body>
</html>
The main difference here is that I'm preloading the JPG image in an <img> that's hidden in a <div> with the display: none property to keep it hidden. I'm not sure exactly what the onLoad event does for divs, but I'm pretty sure it's not what you're wanting. Putting an onLoad event in an img element causes the event to fire once the image has fully loaded, which I believe is what you want.
EDIT: I added a line in the JavaScript to reset the background-size property. If that's not what you wanted then just ignore that part.
This is probably a really simple one but I couldn't find the answer.
I have the following JavaScript/jQuery code where I am trying to create loading messages:
// preload an image to use for dynamic loading icon whenever requested
$(document).ready(function() {
var loadingIcon = document.createElement('img');
loadingIcon.src = '../images/ajax-loader.gif';
window.loadingIcon = loadingIcon; // chache in global var
});
I wanted to cache the image on load so I'm not requesting it each time I want a loading message. Am I actually acheiving this with the above code?
The idea is that there's a lot of dynamic content on the page, and at any time I might have several different loading icons active.
I add the loading icon wherever with:
$('#myElem').appendChild(window.loadingIcon);
This doesn't actually work though, when I try to show a new loading icon, it just moves the previous one, so I can't have more than one on the page at a time.
I'm assuming I need to clone the element?
I tried to wrap the element in a jQuery object to use clone with $(window.loadingIcon).clone() but that didn't work (the function errored).
You could clone the element, yes. But you can just as well create a new <img> element. If the image src has already been loaded by the browser, the image data will be cached and no further network-load will occur. You don't need to cache the element itself to cache the resource it's pointed at.
Try creating the image as a jQuery object:
var $loadingIcon = $('<img src="../images/ajax-loader.gif" />');
And then you should be able to clone it when you need to use it:
$('#myElem').append( $loadingIcon.clone() );
javascript has a native cloneNode method, at least in IE7, which is all I have at the moment. I'm pretty sure it's cross browser.
this should do what you want:
$('#myElem').appendChild(window.loadingIcon.cloneNode());
I'm working on a little image gallery, where you'd roll over a small thumbnail, the larger image would display over it. Clicking on the image would load a full size version in an overlay.
http://shopcoobie.server303.com/shop/
The issue is with the larger image, the rollovers are working fine, but the script I have updates the href which points to the full size image only seems to work the first time I click the image.
$$('.thumbs img').each(function(s) {
$(s).observe('mouseover', function(e) {
var el = e.target;
var thumb = $(el).src;
var large = $(el).alt;
$(el).up(3).down(1).href = large;
$(el).up(3).down(2).src = thumb;
console.log((el).up(3).down(1).href);
console.log(thumb);
});
});
The console outputs the proper image reference, so it seems this should work (and partially does), Im just not sure why it only works once.
Thanks
Rich
I think the lightview plugin builds up its list of images first, then you change the src dynamically, and it doesn't update. So try adding a call to Lightview.updateViews(); at the end of the mouseover handler above.
From Lightview:
Lightview.updateViews(): Force a reset of all Lightview
elements on the page. Most of the time
you won't need to do this since
Lightview will pick up on newly
inserted elements automatically. After
updating existing elements it might be
required to call this function.
So yours is a case where it doesn't automatically pick up the change.