🚀 go-pugleaf

On 2013-04-20 13:14, Latet wrote:
> Witam,
>
> Testuję sobie taki sprytny skrypcik znaleziony w sieci, który w
> przypadku rozpoznania iPada z wyświetlaczem retina podmienia wszystkie
> obrazki na stronie na wersje w wyższej rozdzielczości (o ile są na
> serwerze i mają nazwę zgodną ze schematem: obraznormalny.jpg -->
> obraznormalnyretina.jpg).
>
> Problem tylko w tym, że jeśli takowego pliku (z dopiskiem "retina" w
> nazwie) nie ma, to nazwa źródła obrazka nadal jest zmieniana, co się
> kończy brakiem obrazka na ekranie i wyświetleniem w tym miejscu tekstu z
> tagu ALT.
>
> Jak zmienić poniższy skrypt, aby robił to co robi TYLKO pod warunkiem,
> że plik hi-res o oczekwianej nazwie faktycznie istnieje, a w przeciwnym
> wypadku pozostawiał taki obrazek, jaki był pierwotnie w spokoju?
>
> <script type="text/javascript">
> $(document).ready(function()
> {
> var pixelRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
> images = document.getElementsByTagName("img"),
> num = images.length;
> if (navigator.userAgent.indexOf('iPad') >= 0 && pixelRatio >= 2 )
> {
> for(i=0;i<=num-1;i++)
>    {
>     var temp = images[i].attributes['src'].value,
>     src = temp.substr(0,temp.lastIndexOf('.')) + 'retina' +
> temp.substr(temp.lastIndexOf('.'));
>     images[i].src = src;
>     }
> }
> });
> </script>

$(document).ready(function() {
     var pixelRatio = window.devicePixelRatio ? window.devicePixelRatio : 1,
         images = document.images,
         num = images.length,
         iPad = navigator.userAgent.indexOf('iPad'),
         temp, src;

     // <img src="..." data-imagesrc="" />

     if (iPad >= 0 && pixelRatio >= 2) {
         for ( var i = 0; i < num; i += 1) {
             temp = images[i].attributes['src'].value;
             src = temp.substr(0, temp.lastIndexOf('.')) + 'retina' + 
temp.substr(temp.lastIndexOf('.'));
             (function (img, s) {
                 img.onerror = function () {
                     this.src = this.getAttribute('data-imagesrc');
                 };
                 img.src = s;
             })(images[i], src);
         }
     }
});

W atrybucie "data-imagesrc" podstawiasz źródło obrazka który chcesz, by 
był pobrany w razie gdy "oryginał" nie istnieje.

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

Dzięki, znalazłem tez inne rozwiązanie problemu, chyba bardziej "naturalne" i 
eleganckie:
http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/
(rodział: JavaScript for Retina Image Replacement).

Pozdrawiam,

latet