Как правильно написать скрипт jQuery, отключающий предзагрузку картинок в мобильной версии?

Question

[iAnatol]

Здравствуйте. Есть скрипт подгружающий картинки на сайт:

//<![CDATA[
(function($){
    $.fn.preload = function() {
        this.each(function(){
            $('<img/>')[0].src = this;
		});
  
    $(['/img/one.gif','/img/two.gif','/img/three.gif',]).preload();
}
})(jQuery);
//]]>

Как отключить предзагрузку этих картинок в мобильной версии, т.е. когда разрешение экрана меньше 640px?
Пробовал вариант добавления if ($(window).width()>640 :

//<![CDATA[
(function($){
    $.fn.preload = function() {
        this.each(function(){
          if ($(window).width()>640)
            $('<img/>')[0].src = this;
          }
		});
    $(['/img/one.gif','/img/two.gif','/img/three.gif',]).preload();
}
})(jQuery);
//]]>

Он не работает, из-за моей некомпетентности в этом вопросе.
Предложите пожалуйста рабочие варианты.
Спасибо.

Answer 1

[AdrenaLeen]

Я бы написала так:

//<![CDATA[
(function($){
    $.fn.preload = function() {
        this.each(function(){
            $('<img/>')[0].src = this;
    });
    if($(window).width() > 640) $(['/img/one.gif','/img/two.gif','/img/three.gif',]).preload();
}
})(jQuery);
//]]>

Comments

[iAnatol]

Этот вариант работает! Спасибо за решение проблемы.

Answer 2

[Евгений]

У вас ошибка в коде, не стоит закрывающая скобка:
if ($(window).width()>640
А по теме можно использовать matchMedia:

const isDesktop = window.matchMedia('only screen and (min-width: 1024px)');

if (isDesktop.matches) {
    // todo...
}

Comments

[iAnatol]

Спасибо за ответ. Ошибся когда создавал топик.
Я правильно понял ответ, нужно написать так:

const isDesktop = window.matchMedia('only screen and (min-width: 1024px)');

if (isDesktop.matches) {
   //<![CDATA[
(function($){
    $.fn.preload = function() {
        this.each(function(){
            $('<img/>')[0].src = this;
    });
  
    $(['/img/one.gif','/img/two.gif','/img/three.gif',]).preload();
}
})(jQuery);
//]]>
}

Если да, то в телефон всеравно загружаются эти гифки.

[Евгений]

А какую ширину показывает на мобильном? Посмотрите:
alert(window.innerWidth);

[iAnatol]

Сделал так:

const isDesktop = window.matchMedia('only screen and (min-width: 640px)');

if (isDesktop.matches) {
   //<![CDATA[
(function($){
    $.fn.preload = function() {
        this.each(function(){
            $('<img/>')[0].src = this;
    });
  
    $(['/img/one.gif','/img/two.gif','/img/three.gif',]).preload();
}
})(jQuery);
//]]>
alert(window.innerWidth);
}

до 640 показывает правильный размер, меньше 640 не вылетает алерт ) но гифки загружаются :)

Answer 3

[Руслан Шадура]

У Вас написано

if ($(window).width()>640
     $('<img/>')[0].src = this;
}

А нужно вот так

if ($(window).width()>640){
     $('<img/>')[0].src = this;
}

Comments

[iAnatol]

Поправил. Ошибся при создании вопроса.