CODEWITHSUNDEEP
javascriptbackground-imagespritecss-spritesoffset
Sam
Sam

Reputation: 15506

How to replace direct image calling with sprites, in JavaScript?

some time ago I bought a gallery script online. Back in those days I had never heard of 'too many http request' let alone of 'sprites' and their immens power to improve speed! I guesse the original author, too, was not familiar with sprites... Now I do and would like to customise that script for my site, and change all the instances where png is loaded, by sptires. I know how to do this in CSS, with background position offsets, but not how to make it happen in javascript.

My question is: 1) How is conversion from direct url http://.../etc.png towards a sprite loading PNG done? 2) It looks like asif the PNGs are not consistently referred to below. How can I cope with this when making everything consistent from a single sprite? Thanks very much! Any help that gets me going is much appreciated.

Notes to Self: all the occuring instances of PNG in entire script:

LINE|====================IMAGE===================================================
118 | $mainImg  = $("<img id='main-img' src='http:///spacer.png'/>");
135 | var $backBtn  = $("<img src='" + LIGHTBOX_PATH + "prev.png' id='back-btn'/>");
138 | var $fwdBtn   = $("<img src='" + LIGHTBOX_PATH + "next.png' id='fwd-btn'/>");   
141 | var $closeBtn = $("<img src='" + LIGHTBOX_PATH + "close.png' id='close-btn'/>");
150 | $playBtn.attr("src", "http:///pause.png");
153 | $playBtn.attr("src", "http:///play.png");
163 | $textBtn = $("<img src='" + LIGHTBOX_PATH + "info.png' id='txt-btn'/>");
229 | $(this).attr("src", "http:///spacer.png");
303 | .attr("src","http:////spacer.png").animate({opacity:1}, tranSpeed, startTimer);
353 | $playBtn.attr("src", "http:///pause.png");
357 | $playBtn.attr("src", "http:///play.png");
776 | $prevBtn.css({"background-image":"url(http:///prev.png)",
779 | $nextBtn.css({"background-image":"url(http:///next.png)",

Upvotes: 0

Views: 1205

Answers (1)

Macy Abbey
Macy Abbey

Reputation: 3887

For all of the references above:

  1. Give them unique class names you can refer to in css.
  2. Give each image a defined height and width in your new css classes. Verify that everything still looks as it should. This is so when you change the images to have background images, there will be no bleeding passed the image's boundaries.
  3. Change the src of the image tag to a be a 1x1 transparent gif/png file.

For each css class defined in 1 above:

  1. Change the background-url to be your new sprite.
  2. Change the background-repeat to be no-repeat.
  3. Change the background-position to refer to where the image is in your sprite.

Note: These classes can generally be created for you using a sprite creator program. (http://spritegen.website-performance.org/)

If everything went well:

  1. All your image tags should have a src of your 1x1 transparent pixel image.
  2. All your image tags should have a unique css class which has the background-url, background-position and background-repeat specified.
  3. Your site should look exactly the same.

Upvotes: 1

Related Questions