Hi,
ich nutze relativ häufig das Webfront von unterwegs. Das Ifront nutze ich kaum, somit muss mein Iphone das webfront immer komplett laden. Das läuft auch ganz ordentlich auch via EDGE ist jedoch echt langsam. Ein Grund dafür ist die Art wie Icons geladen werden. Jedes Icon wird einzeln als neue, via PHP generierte Grafik geladen. In meinem Fall vollkommen unnötig, da ich alle Icons bereits mit Photoshop angepasst habe und keine weitere „Nachbearbeitung“ nötig ist. Die Nutzung von Sprites ist Stand der Technik und wird eigentlich überall angewandt. (Wer sich darüber informaieren möchte kann dies hier tun: CSS Sprites: What They Are, Why They’re Cool, and How To Use Them | CSS-Tricks )
Also habe ich alle von mir genutzen Icons genommen und durch einen Spritegenerator gejagt. Heraus kam unten angehängte Grafik. Dadurch hat sich bereits die Größe der herunterzuladenden Icons veringert.
Anschließend bin ich etwas tiefer in die webfront.js eingestiegen und habe alle Aufrufe der icon.php systematisch durch divs ersetzt.
sieht dann z.B. so aus:
_36 = document.createElement("div");
_36.className = "iconBackground iconImagenew icon-" + _37;
_34.appendChild(_36);
Meine CSS wurde um sowas bereichert:
.iconImagenew {
width: 32px;
height: 32px;
}
.iconImageTopnew {
position: absolute;
top: 3px;
left: 12px;
width: 32px;
height: 32px;
}
.iconBackground {
background-image: url(sprites.png);
background-repeat: no-repeat;
}
.icon-Transparent{ background-position: -832px -104px; }
.icon-ArrowRight{ background-position: 0 0; }
.icon-Aufzeichnungen{ background-position: -52px 0; }
.icon-Auswahl{ background-position: -104px 0; }
.icon-Battery{ background-position: -156px 0; }
.icon-Benzin{ background-position: -208px 0; }
.icon-Bewegungsmelder_0{ background-position: -260px 0; }
.icon-Bewegungsmelder_1{ background-position: -312px 0; }
.icon-Bewoelkt{ background-position: -364px 0; }
.icon-Bilder{ background-position: -416px 0; }
usw.
Was habe ich nun davon?
Nurnoch eine Datei muss für das Anzeigen ALLER Icons einmalig geladen werden. Diese eine Datei kann auch auf einem externen Webserver liegen und somit geringe Uploadgeschwindigkeiten des Heimnetzwerks kompensieren.
Warum ich das hier nur als Vorschlag und nicht als How-To poste?
Zu kompliziert. Und die webfront.js kann ich nicht hochladen, da sie Bestandteil von IPS ist.
Gruß Imho
