Grafika, obrazki i zdjęcia ujarzmione

Posted on by

Tag img jest jednym z najpotrzebniejszych znaczników na stronach. Jednak gdy przychodzi do dynamicznego ładowania czy zmiany atrybutów często pojawiają się niespodziewane problemy, które chciałbym przedstawić razem z rozwiązaniami.

Przykładowy obrazek:


<img id="pic" src="http://cdn.contails.websgo.net/imgs/logo_beta6_3_pl.png" />


var pic = document.getElementById('pic');

Pobranie wysokości i szerokości obrazka osadzonego w DOM.


var w = pic.width;
var h = pic.height;

Ciekawsza rzecz zaczyna się wtedy, gdy chcemy załadować zdjęcie dynamicznie i pobrać jego rozmiar.

Continue reading →

Share

Simple HTTP Streaming design pattern

Posted on by

If you want to stream server data in the response of a long-lived HTTP connection you can use HTTP Streaming design pattern.

Check out simple DEMO »


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head id="my-head">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>keemor.com - Simple HTTP Streaming design pattern</title>
	</head>
<body>
	Counter: <span id="counter"></span>
</body>
</html>


<?php
for ( $counter = 0; $counter <= 10; $counter++) {
	?>
	<script type="text/javascript">
		document.getElementById('counter').innerHTML = "<?= $counter ?>";
	</script>
	<?
	flush();
	sleep(3);
}
?>
Share

Konkurencja najnowszych przeglądarek: Firefox 3.5, IE 8, Chrome 3, Opera 10 i Safari 4

Posted on by

Pierwsza połowa tego roku przyniosła najnowsze wersje różnych przeglądarek. W końcu zaczyna być widać, że konkurencja między Firefox 3.5, IE8 i chociażby Chrome 3 przynosi efekty w postaci długo oczekiwanych zmian dla użytkowników i twórców stron.

Poza tym, że wyniki testu Acid3 są coraz lepsze, to pojawiło się parę nowych funkcjonalności, które zostały zaimplementowane przynajmniej w kilku z nich. Omówię funkcjonalności, które wpływają na prędkość ładowania stron oraz pozwalają na lepsze wykorzystanie JavaScriptu.

Proces w zakładce

Przeglądarki zaczęły rozdzielać poszczególne zakładki na osobne procesy. Skutkuje to szybszym przeglądaniem, ponieważ strony są przetwarzane równolegle w tym samym czasie. Dodatkowo, błąd na jednej zakładce nie powoduje zamknięcia całej przeglądarki, ale tylko jednego procesu.
Programiści IE 8 też dali radę to osiągnąć i tworzą dobrze widoczny proces iexplorer.exe dla każdej zakładki.

IE8 proces w zakładce
Continue reading →

Share

Szybkie iteracje czyli przyspieszanie pętli

Posted on by

We wpisie Wydajne tworzenie elementów DOM C.D. pisałem o szybkim sposobie tworzenia elementów DOM w pętli. Zainspirowany częścią prezentacji Nicholasa Zakasa Speed Up Your JavaScript dotyczącą pętli przedstawie sposoby wydajnego iterowania po elementach.
Specyfikacja ecma-262, 3. edycja z grudnia 1999 roku wprowadza cztery rodzaje pętli: for, do-while, while oraz for-in.
Trzy pierwsze pętle służą do iteracji po listach, których klucze są kolejnymi liczbami całkowitymi zaczynając od 0.
For-in natomiast jest stworzony do przebiegania po tablicach asocjacyjnych, których klucze są łańcuchami znakowymi. Konstrukcja:


for (var key in arr) {
    arr[key];
}

w zmiennej key zwraca klucz i nie będę jej omawiać ze względu na niską wydajność.

Co jest ważne?

Dwa najważniejsze czynniki wpływające na prędkość pętli do ilość operacji w każdym przebiegu oraz liczba iteracji.
Continue reading →

Share