Как заменить прямой вызов изображения спрайтами в JavaScript? - PullRequest
Новая
       38

Как заменить прямой вызов изображения спрайтами в JavaScript?

0 голосов
/ 22 февраля 2011

некоторое время назад я купил онлайн-скрипт галереи. В те дни я никогда не слышал о «слишком большом количестве http-запросов», не говоря уже о «спрайтах» и их способности к увеличению скорости! Я догадываюсь, что оригинальный автор тоже не был знаком со спрайтами ... Теперь я делаю и хотел бы настроить этот скрипт для своего сайта и изменить все случаи, когда png загружается, sptires. Я знаю, как сделать это в CSS, со смещением положения фона, но не знаю, как это сделать в javascript.

Мой вопрос: 1) Как выполняется преобразование прямого URL http: //.../etc.png в формат загрузки спрайтов PNG? 2) Похоже, что если PNG не постоянно упоминаются ниже. Как я могу справиться с этим, если сделать все непротиворечивым из одного спрайта? Спасибо большое! Любая помощь, которая мне помогает, очень ценится.

Примечания к Себе: все экземпляры PNG во всем сценарии: 

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)",

1 Ответ

1 голос
/ 22 февраля 2011

Для всех ссылок выше:

  1. Дайте им уникальные имена классов, на которые вы можете ссылаться в CSS.
  2. Дайте каждому изображению определенную высоту и ширину в ваших новых классах CSS.,Убедитесь, что все выглядит так, как должно.Это так, когда вы изменяете изображения, чтобы иметь фоновые изображения, не будет кровотечения за пределами границ изображения.
  3. Измените src тега изображения на прозрачный файл gif / png размером 1x1.

Для каждого класса CSS, определенного в 1 выше:

  1. Измените background-url, чтобы он стал вашим новым спрайтом.
  2. Измените повторение фона, чтобы оно не повторялось.
  3. Измените положение фона, чтобы указать, где находится изображение в вашем спрайте.

Примечание. Эти классы обычно создаются для вас с помощью программы создания спрайтов.(http://spritegen.website -performance.org /)

Если все прошло хорошо:

  1. Все ваши теги изображений должны иметь src вашего прозрачного пиксельного изображения 1x1.
  2. Все ваши теги изображений должны иметь уникальный класс CSS, в котором заданы background-url, background-position и background-repeat.
  3. Ваш сайт должен выглядеть точно так же.
...