Usprawnienie preloadu obrazków w cakePHP może przydać się, gdy chcesz wyświetlić typową galerię: miniaturki + duży obraz zmieniający się po kliknięciu w miniaturkę. Kiedy zaimplementujesz preload obrazków, to znaczy, że jesteś świadomym budowniczym stron internetowych. Wiesz, że możesz wykorzystać przeglądarkę do przyśpieszenia działania Twojej strony, a nie tylko jej biernego wyświetlania. Zatem do dzieła!
Moje podejście obiera się na tzw. elemencie. Element to (wg. manuala CakePHP) "częściowy layout". Czyli cegiełki, z których możesz stworzyć swoje strony.
app/views/elements/image_preload.thtml:
<?php $images_count = count($images); $i = 0;?> <script type="text/javascript"> //<![CDATA[ var _images = new Array(); <?php $i=0; foreach($images as $image): ?> _images[<?= $i ?>] = new Image(); _images[<?= $i++ ?>].src = '<?= 'http://'.$_SERVER['SERVER_NAME'].$this->webroot.'img/'.$subdir.$image['filename'] ?>'; <?php endforeach; ?> //]]> </script>O co chodzi? Wpisz w google "javascript image preload" to się dowiesz :)
Jak z tego skorzystać? Już śpieszę z wyjaśnieniami:
W pliku Twojego layoutu, na samym końcu (przed </body> ofcoz) dodaj:
<?php if(isset($images_to_preload) && isset($images_to_preload_subdir)): ?> <?= $this->renderElement('image_preload', array('images'=>$images_to_preload, 'subdir'=>$images_to_preload_subdir)); ?> <?php endif; ?>A w metodzie odpowiedniego kontrolera wygeneruj tablicę z nazwami plików, które chcesz załadować do cache przeglądarki i przekaż do layoutu:
$this->set('images_to_preload', $content['Photo']); $this->set('images_to_preload_subdir', 'photos/');U mnie akurat model Photo ma pole filename, więc tak napisałem sobie element. Do tego dodałem możliwość przekazania z kontrolera podkatalogu w którym są obrazki w /app/webroot/img (teraz już nie wiem dlaczego, ale jak to pisałem, na pewno było to uzasadnione ;))
Brak komentarzy:
Prześlij komentarz