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?
‹ js: változó url, oldaltöltés nélkül? css fájlból ID kinyerése ›
 ■
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:
Class_Main.prototype.do_responsive_image = function () {

	if ($('html').hasClass('js') === false) return;

	var $img = $('div[data-function="responsive-img"]'),
		sizes = [ 'small', 'medium' ];

	if ($img.length === 0) return;

	$img.each(function () {

		var $this = $(this),
			src = $this.attr('data-src'),
			extension_loc = src.lastIndexOf('.'),
			path = src.substr(0, extension_loc),
			extension = src.substr(extension_loc + 1);
		
		$this.attr({
			'data-path': path,
			'data-extension': extension
		});

	});

	function set_img_src () {

		if (Modernizr.mq("screen and (min-width: 768px)")) {
		
			$img.each(function () {

				var $this = $(this),
					src = $this.attr('data-path') + '.' + $this.attr('data-extension');

				
				if ($this.children('img').length === 0) {

					$('<img>', {
						src: src,
						alt: $this.attr('data-alt')
					})
					.appendTo($this);

				} else {

					$this.children('img')
						.attr({'src': src, 'alt': $this.attr('data-alt')});
				}

			});
		
		}

		if (Modernizr.mq("screen and (max-width: 767px)")) {
		
			$img.each(function () {

				var $this = $(this),
					src = $this.attr('data-path') + '_' + sizes[1] + '.' + $this.attr('data-extension');

				if ($this.children('img').length === 0) {

					$('<img>', {
						src: src,
						alt: $this.attr('data-alt')
					})
					.appendTo($this);

				} else {

					$this.children('img')
						.attr({'src': src, 'alt': $this.attr('data-alt')});
				}
			});

		}

		if (Modernizr.mq("screen and (max-width: 480px)")) {
		
			$img.each(function () {

				var $this = $(this),
					src = $this.attr('data-path') + '_' + sizes[0] + '.' + $this.attr('data-extension');

				if ($this.children('img').length === 0) {

					$('<img>', {
						src: src,
						alt: $this.attr('data-alt')
					})
					.appendTo($this);

				} else {

					$this.children('img')
						.attr({'src': src, 'alt': $this.attr('data-alt')});
				}
			});
		}
	}

	$(window).resize(function () {
		set_img_src();
	})
	.trigger('resize');
};
<div data-src="view/picture/index_image.png" data-function="responsive-img" data-alt="lorem ipsum"></div>
<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.