Исправление AlphaImageLoader для работ PNG онлайн, но не локально - PullRequest
0 голосов
/ 08 сентября 2010

Я использую исправление AlphaImageLoader, называемое supersleight, со следующим кодом:

   var supersleight = function() {

 var root = false;
 var applyPositioning = true;

 // Path to a transparent GIF image
 var shim   = 'images/empty.gif';

 // RegExp to match above GIF image name
 //var shim_pattern = /x\.gif$/i;



 var fnLoadPngs = function() { 
  if (root) {
   root = document.getElementById(root);
  }else{
   root = document;
  }
  for (var i = root.all.length - 1, obj = null; (obj = root.all[i]); i--) {
   // background pngs
   if (obj.currentStyle.backgroundImage.match(/\_.png/i) !== null) {
    bg_fnFixPng(obj);
   }
   // image elements
   if (obj.tagName=='IMG' && obj.src.match(/\_.png$/i) !== null){
    el_fnFixPng(obj);
   }
   // apply position to 'active' elements
   if (applyPositioning && (obj.tagName=='A' || obj.tagName=='INPUT') && obj.style.position === ''){
    obj.style.position = 'relative';
   }
  }
 };

 var bg_fnFixPng = function(obj) {
  var mode = 'scale';
  var bg = obj.currentStyle.backgroundImage;
  var src = bg.substring(5,bg.length-2);
  if (obj.currentStyle.backgroundRepeat == 'no-repeat') {
   mode = 'crop';
  }
  obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')";
  obj.style.backgroundImage = 'url('+shim+')';
  obj.style.visibility= 'visible';
 };

 var el_fnFixPng = function(img) {
  var src = img.src;
  img.style.width = img.width + "px";
  img.style.height = img.height + "px";
  img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
  img.src = shim;
  img.style.visibility= 'visible';
 };

 var addLoadEvent = function(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
   window.onload = func;
  } else {
   window.onload = function() {
    if (oldonload) {
     oldonload();
    }
    func();
   };
  }
 };

 return {
  init: function() { 
   addLoadEvent(fnLoadPngs);
  },

  limitTo: function(el) {
   root = el;
  },

  run: function() {
   fnLoadPngs();
  }
     };
    }();

    // limit to part of the page ... pass an ID to limitTo:
    // supersleight.limitTo('header');
    supersleight.init();
    //Från början är opacity'n 100 eftersom jag inte vet om Javascript är påsatt eller inte och därmed inte vet om PNG'arna kommer att
    //bli genomskinliga eller ej. Är Javascript på så gör jag också bakgrunden genomskinlig så att PNG'arnas genomskinlighet inte blir i onödan
    //If-satsen eftersom transparency ej existerar på första-sidan och därigenom ger fel där

    if(document.getElementById('transparency') != null){
     document.getElementById('transparency').style.filter= "alpha(opacity=60)";
     document.getElementById('transparency').style.background = "#cccccc";
     }

Я вызываю его с помощью тега отсрочки SCRIPT в начале файла HTML.Когда я загружаю скрипт и страницу на сервер, он отлично работает, но когда я пробую его локально, изображение вообще не отображается.По сути, сценарий устанавливает фон как прежнее изображение PNG, используя AlphaImageLoader, а затем вместо него устанавливает пустой пиксель как IMG src.

Если я закомментирую:

//img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
//img.src = shim;

изображение появляется внормальное состояние, то есть PNG с прозрачностью.Так или иначе, фильтр не устанавливает фон должным образом, когда он выполняется локально, и оставляет его пустым.При попытке сделать это в Browsershots и IE Netrenderer (ipinfo.info) я получаю тот же результат в Netrenderer, хотя Browsershots, Microsoft Expression Web Superpreview 3, тестирование с множественными ИЭ и IETester показывает вещи так, как они должны ...Кто-нибудь получил идею?


Оказывается, это потому, что я получил к нему доступ через файл: // и все это лежало в папке с множеством пробелов и странных символов в имени ... .notчто я думал, что это будет иметь значение, но, по-видимому, для того, чтобы этот эффект работал в моем случае, я не могу иметь его в папке, которая не соответствует простому синтаксису без пробелов и прочего ... возможно, это больше общая проблема Проводникачем конкретно AlphaImageLoader ... любой, кто хочет просветить меня немного больше в этом вопросе, приветствуется!:)


Еще одно обновление ... Я могу без проблем получить к нему доступ через Интернет, локальный сервер (localhost) и напрямую через файл (file: // или C: //).Проблема возникает, когда происходит следующее:

У меня была папка со следующим именем:

Sirocco v. 1.2 (загружено 100908) PNGfix + bakgrundsfärger_IE5.5-6

При использовании других имен папок проблема никогда не возникала, поэтому я попытался сузить ее ... похоже, что

)

является символомтот, который вызывает проблему ... с ним AlphaImageLoader не заполняет фон так, как он должен, но без него фон заполняется нормально ... кто-нибудь понял, почему?

Ответы [ 3 ]

0 голосов
/ 08 сентября 2010

Это не работает, потому что вы используете file: // а не http: //, а настройки безопасности браузера не позволят вам запустить javascript из file: //

Если вы этого не сделаетена вашем компьютере уже настроен сервер, я могу порекомендовать XAMPP.

0 голосов
/ 08 сентября 2010

РЕШЕНИЕ: Я чувствую себя глупо, это связано с параметрами, полученными эффектом фильтра.

Использование фильтра выглядит следующим образом:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader('source','sizingMethod')

Конечно, когда я продолжаю и загоняю следующее для источника:

Sirocco v. 1.2 (загружено 100908) PNGfix + bakgrundsfärger_IE5.5-6

... фильтр не будет знать, где закрыть парантез, и закрывает его слишком рано, поэтому путь к изображению неверен, а метод определения размера даже не включен.Конечно, программист мог предвидеть это, но я не виню его .. cmon, какие имена папок я здесь использую ???Конечно.Я бы не использовал их в реальной ситуации ... это просто для локального хранения веб-сайта, чтобы я мог отслеживать, какая версия.

РЕШЕНО!Спасибо вам всем!

0 голосов
/ 08 сентября 2010

AlphaImageLoader использует пути относительно документа, а не файла CSS. Может быть, это как-то связано с вашей проблемой?

...