Как сделать загрузку картинок и скриптов только для десктопной версии?

Question

[here_without_u]

Мне необходимо, чтобы картинки, которые вставлены как загружались только для
media="(min-width: 1000px)", т.к. они очень тяжелые и в мобильной версии не нужны. Как их вставить в конец body через innerHtml или appendTo ?

<script>

	(function($){
		$(window).on("load",function(){
			if($(window).width() < 767) 
			{
				$("<img class="background-clipart  background-clipart-1" src="img/background/1.png" height="600" width="639" alt="">
					<img class="background-clipart  background-clipart-2" src="img/background/2.png" height="600" width="641" alt="">
					<img class="background-clipart  background-clipart-3" src="img/background/3.png" height="600" width="610" alt="">
					<img class="background-clipart  background-clipart-4" src="img/background/4.png" height="600" width="649" alt="">
					<img class="background-clipart  background-clipart-5" src="img/background/5.png" height="600" width="598" alt="">
					<img class="background-clipart  background-clipart-6" src="img/background/6.png" height="600" width="648" alt="">
					<img class="background-clipart  background-clipart-7" src="img/background/7.png" height="600" width="786" alt="">
					<img class="background-clipart  background-clipart-8" src="img/background/8.png" height="600" width="597" alt="">
					<img class="background-clipart  background-clipart-9" src="img/background/9.png" height="600" width="608" alt="">
					<img class="background-clipart  background-clipart-10" src="img/background/10.png" height="600" width="600" alt="">
					<img class="background-clipart  background-clipart-11" src="img/background/11.png" height="397" width="800" alt="">
					<img class="background-clipart  background-clipart-12" src="img/background/12.png" height="600" width="497" alt="">
					<img class="background-clipart  background-clipart-13" src="img/background/13.png" height="488" width="800" alt="">
					<img class="background-clipart  background-clipart-14" src="img/background/14.png" height="600" width="594" alt="">
					<img class="background-clipart  background-clipart-15" src="img/background/15.png" height="600" width="614" alt="">
					<img class="background-clipart  background-clipart-16" src="img/background/16.png" height="600" width="497" alt="">
					<img class="background-clipart  background-clipart-17" src="img/background/17.png" height="600" width="629" alt="">").appendTo($(".auto-layout"));



};
});
})

</script>

Comments

[Sayonji]

Вы привели код. Что с ним не так?

[here_without_u]

Sayonji: не работает, почему не пойму..

[YemSalat]

сделайте на CSS!

[here_without_u]

YemSalat: вопрос стоял о реализации средствами JS внутри html. И я видел, как люди делали с помощью innerHtml, но не могу сейчас найти это..

[YemSalat]

here_without_u: зачем дергать JS?? В CSS пропишите display: none и они загружаться на мобиле не будут

[here_without_u]

YemSalat: трафик всё равно будет идти Загружаются ли элементы, которые display:none?

[YemSalat]

here_without_u: загружаться будет только HTML, а не сами картинки

[here_without_u]

YemSalat: так они ведь вставлены через img, тоже будут загружаться трафиком, но скрываться через display.
Там же написано "Браузер грузит все картинки, как только появляется атрибут src. Более того, чтобы загрузить их как можно раньше у современных браузеров существует препарсер, который ищет адреса, которые нужно загрузить ещё до того как будут вычислены стили. Грузятся даже фоновые картинки на элементах с display: none, но уже во вложенных элементах фоновые картинки уже не грузятся."

[YemSalat]

here_without_u: простите, перепутал с картинками в бэкграунде - только они не грузятся (если прописать media query), те что в атрибуте src действительно будут грузиться

Answer 1

[Sayonji]

Вы создаете замыкание, но не вызываете его.
У вас в конце:

};
});
})

А должно быть:

};
});
}) (jQuery)

Comments

[here_without_u]

Не помогло

[Sayonji]

here_without_u: И кавычки исправьте. Вы используете двойные внутри строки, ограниченной тоже двойными. Это синтаксическая ошибка же, поставьте одинарные снаружи: $('<img class="...alt="">') Далее, в js нельзя перенос строки внутри строкового литерала делать: разбейте всё это в сумму строк по одной картинке или напишите в одну длинную строку. И вообще всё это плохо, откройте консоль с смотрите синтаксические ошибки.

[here_without_u]

Sayonji: спасибо, получилось только по одной. Всё работает.

Answer 2

[here_without_u]

Решено таким образом

<script>

  (function($){
    $(window).on("load",function(){
      if($(window).width() < 767) 
      {
        $('<img class="background-clipart  background-clipart-17" src="img/background/17.png" height="600" width="629" alt="">').appendTo($('.auto-layout'));
        $('<img class="background-clipart  background-clipart-17" src="img/background/17.png" height="600" width="629" alt="">').appendTo($('.auto-layout'));

};
});
}) (jQuery)

</script>