ugrás a tartalomhoz

img src-ben megadott képek betöltésének megakadályozása

asam9 · 2013. Május. 14. (K), 12.23
Sziasztok,

Vannak képeim, amik szeretném, hogyha benne maradnának az img src attribútumában a validator miatt, ill. amiatt ha ki lenne kapcsolva a js, viszont szeretném megakadályozni, hogy ezek a képek betöltődjenek. A js fájljaim a záró body előtt vannak behúzva, így nem adom meg külön, hogy jQuery ready-re fussanak le az utasítások.
Ez az egész ügy arról szól, hogy szeretném képernyőfelbontástól függően betölteni a megfelelő méretű képeket és nem szeretnék plugin-t használni hozzá.

Kigyűjtöm a képeket az oldalon, utána az src attribútumaikat eltárolom és azonnal törlöm is az img src-jéből, az eltárolt src-t külön bontom elérési útra és kiterjesztésre és elhelyezem az adott img tag data-path és data-extension attribútumában.

Ezután egy függvénnyel levizsgálom a böngészőablak szélességét és ennek alpján állítom össze újra az src-t, majd ugyanezt a függvényhívást ismétlem meg a böngésző onresize eseményére.

Ha jól tudom, akkor a képek a load eseményre töltődnek be teljesen, azt nem eresztem rá…, de gondolom semmi garancia arra, hogy nem töltődnek be a képek addig, mire ez a kód lefut. Van ötletetek a problémára?
 
1

Kiterjedés

Hidvégi Gábor · 2013. Május. 14. (K), 13.04
Milyen méretű képekről van szó?
2

Jelenleg csak egyetlen kép

asam9 · 2013. Május. 14. (K), 13.22
Jelenleg csak egyetlen kép van az oldalon: 1170x500, 767x328 és 480x205 a 3 kimentett méret. A köztes állapotok variálhatók, mert megvan a psd. Szakdolgozat lesz a dologból és főleg űrlapelemekből és kis boxokból épül fel és a képek maximum az ikonokat jelentették eddig, de a grafika is követelmény, így abból valami ütősebbet akartam, ha már nincs belőle sok… ezért a nagy méret :) Viszont ha emiatt az egy kép miatt nem is lenne érdemes fáradni az egésszel, akkoris érdekelne, hogy megoldható-e. Arra gondoltam, hogy a kép után szúrni be egyből ezt a js függvényt, de azt csak végső esetben szeretném (már ha az megoldást jelentene egyáltalán).
4

noscript?

Poetro · 2013. Május. 14. (K), 14.18
Es ha az egyik kepet (mondjuk a legkisebbet) egy <noscript> elembe raknad, es JavaScripttel tenned ki a megfelelo meretut, amikor van JavaScript? A <noscript> elemnek adhatsz id-t vagy class-t, es akkor tudod, hova kell beszurni az igazi kepet. A <noscript> tartalmat pedig az textContent tulajdonsaggal, illetve a childNodes-ok kozul a text tipusuak data attributuma segitsegevel tudod kiszedni. Ezek utan mar csak ki kell cserelni a benne levo HTML szoveg tartalmat a neked megfelelore.
3

noscript

Endyl · 2013. Május. 14. (K), 14.06
A picturefill (a tervezett picture tag működését utánozó responsive kép megoldás) a noscript tag-gel oldja meg a fallback kép automatikus betöltésének megakadályozását.
5

Köszi nektek :) A noscript

asam9 · 2013. Május. 14. (K), 18.11
Köszi nektek :) A noscript lett a befutó végül. Lehet, hogy nem a legoptimálisabb a kód és még nem néztem át alaposan, de ez lett:
  1. Class_Main.prototype.do_responsive_image = function () {  
  2.   
  3.     if ($('html').hasClass('js') === falsereturn;  
  4.   
  5.     var $img = $('div[data-function="responsive-img"]'),  
  6.         sizes = [ 'small''medium' ];  
  7.   
  8.     if ($img.length === 0) return;  
  9.   
  10.     $img.each(function () {  
  11.   
  12.         var $this = $(this),  
  13.             src = $this.attr('data-src'),  
  14.             extension_loc = src.lastIndexOf('.'),  
  15.             path = src.substr(0, extension_loc),  
  16.             extension = src.substr(extension_loc + 1);  
  17.           
  18.         $this.attr({  
  19.             'data-path': path,  
  20.             'data-extension': extension  
  21.         });  
  22.   
  23.     });  
  24.   
  25.     function set_img_src () {  
  26.   
  27.         if (Modernizr.mq("screen and (min-width: 768px)")) {  
  28.           
  29.             $img.each(function () {  
  30.   
  31.                 var $this = $(this),  
  32.                     src = $this.attr('data-path') + '.' + $this.attr('data-extension');  
  33.   
  34.                   
  35.                 if ($this.children('img').length === 0) {  
  36.   
  37.                     $('<img>', {  
  38.                         src: src,  
  39.                         alt: $this.attr('data-alt')  
  40.                     })  
  41.                     .appendTo($this);  
  42.   
  43.                 } else {  
  44.   
  45.                     $this.children('img')  
  46.                         .attr({'src': src, 'alt': $this.attr('data-alt')});  
  47.                 }  
  48.   
  49.             });  
  50.           
  51.         }  
  52.   
  53.         if (Modernizr.mq("screen and (max-width: 767px)")) {  
  54.           
  55.             $img.each(function () {  
  56.   
  57.                 var $this = $(this),  
  58.                     src = $this.attr('data-path') + '_' + sizes[1] + '.' + $this.attr('data-extension');  
  59.   
  60.                 if ($this.children('img').length === 0) {  
  61.   
  62.                     $('<img>', {  
  63.                         src: src,  
  64.                         alt: $this.attr('data-alt')  
  65.                     })  
  66.                     .appendTo($this);  
  67.   
  68.                 } else {  
  69.   
  70.                     $this.children('img')  
  71.                         .attr({'src': src, 'alt': $this.attr('data-alt')});  
  72.                 }  
  73.             });  
  74.   
  75.         }  
  76.   
  77.         if (Modernizr.mq("screen and (max-width: 480px)")) {  
  78.           
  79.             $img.each(function () {  
  80.   
  81.                 var $this = $(this),  
  82.                     src = $this.attr('data-path') + '_' + sizes[0] + '.' + $this.attr('data-extension');  
  83.   
  84.                 if ($this.children('img').length === 0) {  
  85.   
  86.                     $('<img>', {  
  87.                         src: src,  
  88.                         alt: $this.attr('data-alt')  
  89.                     })  
  90.                     .appendTo($this);  
  91.   
  92.                 } else {  
  93.   
  94.                     $this.children('img')  
  95.                         .attr({'src': src, 'alt': $this.attr('data-alt')});  
  96.                 }  
  97.             });  
  98.         }  
  99.     }  
  100.   
  101.     $(window).resize(function () {  
  102.         set_img_src();  
  103.     })  
  104.     .trigger('resize');  
  105. };  
  1. <div data-src="view/picture/index_image.png" data-function="responsive-img" data-alt="lorem ipsum"></div>  
  2. <noscript><img src="view/picture/index_image_small.png" alt="lorem ipsum"></noscript>  
6

Bocsi, kétszer ment el.

asam9 · 2013. Május. 14. (K), 18.17
Bocsi, kétszer ment el.