[Résolu] Slick Carousel et mémoire insuffisante

Bonjour,

Je rencontre un problème avec le plugin jQuery slick carousel et je n'arrive pas à le résoudre.

En ce moment, je développe un site pour un client et j'ai 3 pages avec un slider chacun ayant des options différentes. Le slider/plugin en question est celui-ci. J'ai un problème de chargement avec le 3ème slider et dans la console le message suivant apparait: "uncaught out of memory". Je ne comprends pas trop ce problème. Je ne suis pas expert en javaScript et encore moins dans la gestion de mémoire (je ferai des recherches sur ce sujet).

La stack technique est basique: un fichier d'entrée index.php qui inclut un header.php et footer.php. Le footer contient le jquery et slick.js appelé en cdn. Les 3 autres pages sont en .php qui incluent le header et footer. Toutes mes fonctions js sont dans un seul fichier index.js.

J'ai essayé de reproduire chez moi le problème avec plus ou moins la même stack technique et options.

Voici mon code js

var opt1 = {

      dots: false,

      infinite: true,

      slidesToShow: 4,

      slidesToScroll: 1,

      speed: 300,

      variableWidth: true,

      arrows: true,

      prevArrow: $('[data-prev="prevButton"]'),

      nextArrow: $('[data-next="nextButton"]'),

      responsive: [

        {

          breakpoint: 769,

          settings: {

            slidesToShow: 2,

            slidesToScroll: 1,

          }

        },

      ]

     }


    var opt2 = {

      dots: false,

      infinite: true,

      slidesToShow: 1,

      slidesToScroll: 1,

      speed: 300,

      arrows: true,

      prevArrow: $('[data-prev="prevButton"]'),

      nextArrow: $('[data-next="nextButton"]')

    }

    var opt3 = {

      dots: false,

      infinite: false,

      slidesToShow: 3,

      slidesToScroll: 0,

      speed: 300,

      arrows: false,

      centerMode: false,

      variableWidth: true,

      prevArrow: $('[data-prev="prevButton"]'),

      nextArrow: $('[data-next="nextButton"]'),

      responsive: [

        {

          breakpoint: 1197,

          settings: {

            infinite: true,

            slidesToShow: 2,

            slidesToScroll: 1,

            centerMode: false

          }

        },

        {

          breakpoint: 769,

          settings: {

            slidesToShow: 2,

            slidesToScroll: 1,

          }

        },

        {

          breakpoint: 761,
                  settings: {

             slidesToShow: 1,

             slidesToScroll: 1,

           }

         }

       ]

     }

var gadgetCarousel = $(".slider");
  
gadgetCarousel.each(function() {
  if ($(this).is(".one")) {
  $(this).slick($(opt1));
  } 
  else if ($(this).is(".two")){
    $(this).slick($(opt2));
  }
  else if ($(this).is(".three")){
    $(this).slick($(opt3));
  }
  else {
    $(this).slick();
  }
})

A ma grande surprise, il fonctionne bien chez moi, en local (pas d'erreur de mémoire), mais ce même code ne fonctionne pas sur le projet en question.

Je sais que c'est un peu flou et que je ne peux pas partager le code source mais si quelqu'un pense avoir une idée, ça m'aiderait énormément.

Edit 1 :
Je viens de me rendre compte que même en local, le site ne réponds plus, lorsque je change de pages trop de fois.

J'obtiens ce message

La connexion avec ws://192.168.1.96:8080/browser-sync/socket.io/?EIO=3&transport=websocket&sid=jAtdd_cL2H2oC_fsAAAa a été interrompue pendant le chargement de la page.

Merci
Modifié par allan00958 (29 Aug 2020 - 17:59)

Bonjour,

Tu peux tenter (mais je dis ça un peu au hasard) :

$(window).on('beforeunload', function(){ 
    socket.close(); 
}); 

Il faut probablement l'ajouter en fin de page !

Amicalement,

Bonjour,

si jamais : est-ce que tu as redémarré ton ordinateur récemment ? Perso avec 4 Go de RAM et du lourd (Slack Chrome, Firefox, node webpack et ce qui suit, Thunderbird, éditeur, rafraîchissement des centaines de fois du même onglet, etc) je finis par manquer de mémoire dans la compilation de webpack ou Gulp dans node.js... Je redémarre et c'est reparti.
Avec 16 Go que je redémarre tous les jours, pas de souci évidemment.

@Arrival

Je préfère utiliser un plugin. Je ne veux pas réinventer la roue. Lorsqu'on travail en agence, il y a des délais à tenir donc il faut être productif.

@parsimonhi

Ton bout de code n'améliore pas la situation, malheureusement.

@Felipe

Je suis sur un mac avec 16go lol et je galère quand même.

@niuxe

Oui, c'est ce qui est bizarre. Si j'appelle le 3e slider seulement même problème. Le code est statique oui.

 $(document).ready(function(){
  $('.slider').slick({
      dots: false,
      infinite: true,
      slidesToShow: 4,
      slidesToScroll: 1,
      speed: 300,
      variableWidth: true,
      arrows: true,
      prevArrow: $('[data-prev="prevButton"]'),
      nextArrow: $('[data-next="nextButton"]'),
      responsive: [
        {
          breakpoint: 769,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1,
          }
        },
      ]   
    });
  

    $('.sliderWrapper').slick({
        dots: false,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        speed: 300,
        arrows: true,
        prevArrow: $('[data-prev="prevButton"]'),
        nextArrow: $('[data-next="nextButton"]')
    });
  

  $('.highlightArticlesSlider').slick({
        dots: false,
        infinite: false,
        slidesToShow: 3,
        slidesToScroll: 0,
        speed: 300,
        arrows: true,
        centerMode: false,
        variableWidth: true,
        prevArrow: $('[data-prev="prevButton"]'),
        nextArrow: $('[data-next="nextButton"]'),
        responsive: [
          {
            breakpoint: 1197,
            settings: {
              infinite: true,
              slidesToShow: 2,
              slidesToScroll: 1,
              centerMode: false
            }
          },
          {
            breakpoint: 769,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1,
            }
          },
          {
            breakpoint: 761,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
            }
          }
        ]
    });
 });

Je suis vraiment perdu. Les 2 autres sliders fonctionnent mais pas celui-la.

Qu'est-ce qui pourrait bien causer ce problème de mémoire ? Su Chrome, la page plante tout simplement.
Modifié par allan00958 (31 Aug 2020 - 10:04)