2

I am trying to make a Chess Board. I have managed to load all the images into an image array. So that I don't have to repeatedly request the server for the images. (You would say browser cache would manage that,(if at all it will) but lets assume, it won't)

So the problem I face now is that each image that has to be repeated for example: the pawns, the blank spaces, rooks and knights, after adding to a table cell, and then re-adding to another table cell, doesn't give me two pawns. But only one. I guess that is because it is a single image object.

So I thought I'd clone the image object every time I have to use it. So what are the different ways to clone it.

I haven't use jQuery at all, ever. So I tried including this code in my script 

function cloneBlank(blank,c) {
    var img = jQuery.extend({},blank[c]);
    return img;
}

Error: Uncaught ReferenceError: jQuery is not defined

(Read about the exted method here :Cloning a JavaScript object?)

I have also read about the .clone() method, but have no idea how it is used

Moreover, does any of these methods ensure that the images would not be re-requested from the server and just copied as objects in memory (Else what is the point of having a image buffer).

Secondly Are there any methods that do ensure such behaviour.

Community
  • 1
  • 1
tmj
  • 1,750
  • 2
  • 19
  • 34
  • You don't really need to clone anything. Just add `img` elements that use the same `src`. – Vivin Paliath May 06 '13 at 22:21
  • then there is no need to even have image objects I suppose. Just have an array containing the image urls.Wouldn't that be using the browser's cache? And I suppose each time, the image would be requested from the server! – tmj May 06 '13 at 22:24
  • think about using a background sprite; you use one image containing all elements and then assign a background offset to each one `.pawn{background:url(...) Xpx Ypx}` – unloco May 06 '13 at 22:32
  • i am not sure how your code is going, but if you are representing each one square of the 8x8 squares by a div, then you can set the overflow of that div to hidden, and when you put the same image just change the margin-top and left of the image-sprite on each square to get the required piece. – Mi-Creativity May 06 '13 at 22:37
  • @UnLoCo didn't get you. I am quite in-experienced please write it down as an complete answer please. – tmj May 06 '13 at 22:37
  • Browsers cache things in a very nice way, I doubt any browser will do multiple GET request for the same resource while loading the page. Just to be sure, you can set HTTP headers for browser side caching, like noted here: https://developers.google.com/speed/docs/best-practices/caching (there's no need to do everything - probably Cache-control: max-age would be enough). – mrówa May 06 '13 at 22:39

2 Answers2

2

My suggestion is to have an image sprite which has all element images combined.
here's a good article about that.
In your case, your sprite would look like this
Css example:

  #chess .piece{
      position:absolute;
      background-image: url(http://bit.ly/12d8KST);
      width:45px;
      height:45px;
  }
  #chess .pawn{background-position: -56px -53px;}
  #chess .rook{background-position: 0px -53px;}

here's a demo

unloco
  • 6,928
  • 2
  • 47
  • 58
1

Well, if you're not fine with the browser cache, load the image in a base64 encoded form, and use <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />.

Then, you could set up base64 encoded data for pawns, rooks, etc and set the src attribute of the images appropriately.

See Wikipedia Data URI support page.

BTW, I agree with the others; you're better off relying on the browser cache. And what's wrong with loading 64 simple images anyways?

Powerslave
  • 1,408
  • 15
  • 16