[Skip to main content](#vessel-content) # infinite\_scroll cree une rupture dans le flux ## - **[erickb](/forum/user/4069-erickb "View erickb's Profile")** - [![erickb's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/4069-erickb "View erickb's Profile") Topic Author - [ Away](/forum/user/4069-erickb) Less More - Posts: 2697 - Thank you received: 74 - - 7 years 5 months ago - 7 years 5 months ago [\#306599](#306599) by [erickb](/forum/user/4069-erickb "View erickb's Profile") *[infinite\_scroll cree une rupture dans le flux](/forum/5-support-en-francais-french-support-/897468-infinite-scroll-cree-une-rupture-dans-le-flux#306599 "-- HikaShop version -- : 4.1.0 Bonjour dans la liste des produits infinite_scroll cree une rupture car il ajoute un conteneur var div = d.createElement('div'); ce qui fait qu'on se retrouve avec des vides entre les elements qui ne finissent pas une ligne est il possible d'éviter ce code et de charger les elements sans conteneur a la suite des autres dans le conteneur principal? merci")* was created by *[erickb](/forum/user/4069-erickb "View erickb's Profile")* -- HikaShop version -- : 4.1.0 Bonjour dans la liste des produits infinite_scroll cree une rupture car il ajoute un conteneur **var div = d.createElement('div');** ce qui fait qu'on se retrouve avec des vides entre les elements qui ne finissent pas une ligne est il possible d'éviter ce code Code: var div = d.createElement('div'); o.updateElem(div, xhr.responseText); et de charger les elements sans conteneur a la suite des autres dans le conteneur principal? merci Last edit: 7 years 5 months ago by [erickb](/forum/user/4069-erickb "View erickb's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vODk3NDY4LWluZmluaXRlLXNjcm9sbC1jcmVlLXVuZS1ydXB0dXJlLWRhbnMtbGUtZmx1eD90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86287 - Thank you received: 14264 - - 7 years 5 months ago [\#306604](#306604) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[infinite\_scroll cree une rupture dans le flux](/forum/5-support-en-francais-french-support-/897468-infinite-scroll-cree-une-rupture-dans-le-flux#306604 "-- HikaShop version -- : 4.1.0 Bonjour dans la liste des produits infinite_scroll cree une rupture car il ajoute un conteneur var div = d.createElement('div'); ce qui fait qu'on se retrouve avec des vides entre les elements qui ne finissent pas une ligne est il possible d'éviter ce code et de charger les elements sans conteneur a la suite des autres dans le conteneur principal? merci")* Bonjour, Il faudrait faire des tests. Ce que vous pourriez faire, c'est essayé de remplacer : var newNode = container.parentNode.insertBefore(div, container); par: Code: for(var i =0; i < div.children.length, i++) { var newNode = container.parentNode.insertBefore(div.children[i], container); } mais je ne suis pas convaincu que cela vous aide. Car vous aurez toujours le <div style="clear:both"></div> de fin de ligne des éléments précédent. The following user(s) said Thank You: [erickb](/forum/user/4069-erickb "View erickb's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vODk3NDY4LWluZmluaXRlLXNjcm9sbC1jcmVlLXVuZS1ydXB0dXJlLWRhbnMtbGUtZmx1eD90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[erickb](/forum/user/4069-erickb "View erickb's Profile")** - [![erickb's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/4069-erickb "View erickb's Profile") Topic Author - [ Away](/forum/user/4069-erickb) Less More - Posts: 2697 - Thank you received: 74 - - 7 years 1 month ago [\#310524](#310524) by [erickb](/forum/user/4069-erickb "View erickb's Profile") Replied by *[erickb](/forum/user/4069-erickb "View erickb's Profile")* on topic *[infinite\_scroll cree une rupture dans le flux](/forum/5-support-en-francais-french-support-/897468-infinite-scroll-cree-une-rupture-dans-le-flux#310524 "-- HikaShop version -- : 4.1.0 Bonjour dans la liste des produits infinite_scroll cree une rupture car il ajoute un conteneur var div = d.createElement('div'); ce qui fait qu'on se retrouve avec des vides entre les elements qui ne finissent pas une ligne est il possible d'éviter ce code et de charger les elements sans conteneur a la suite des autres dans le conteneur principal? merci")* Je reviens là dessus car ce scroll infini n'est pas du tout responsive design j'ai 4 elements par lignes qui passent a 3 puis 2 puis un selon la largeur d'ecran le problème c'est quand ils passent a trois , il y a une ligne avec 2 éléments et un vide Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vODk3NDY4LWluZmluaXRlLXNjcm9sbC1jcmVlLXVuZS1ydXB0dXJlLWRhbnMtbGUtZmx1eD90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86287 - Thank you received: 14264 - - 7 years 1 month ago [\#310529](#310529) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[infinite\_scroll cree une rupture dans le flux](/forum/5-support-en-francais-french-support-/897468-infinite-scroll-cree-une-rupture-dans-le-flux#310529 "-- HikaShop version -- : 4.1.0 Bonjour dans la liste des produits infinite_scroll cree une rupture car il ajoute un conteneur var div = d.createElement('div'); ce qui fait qu'on se retrouve avec des vides entre les elements qui ne finissent pas une ligne est il possible d'éviter ce code et de charger les elements sans conteneur a la suite des autres dans le conteneur principal? merci")* Bonjour, C'est surement dû au fait que vos blocs produits n'ont pas tous la même taille. Normalement, il suffit d'activer l'option "height consistency" de votre élément de menu, ou d'ajouter une ligne de CSS pour forcer la taille de tous les blocs. Notez qu'avec la prochaine version d'HikaShop nous allons passer sur un système de grid utilisant flex au lieu de floats. Cela permettra d'éviter ce soucis dans tous les cas peu importe si l'option "height consistency" est activée ou non, etc. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vODk3NDY4LWluZmluaXRlLXNjcm9sbC1jcmVlLXVuZS1ydXB0dXJlLWRhbnMtbGUtZmx1eD90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[erickb](/forum/user/4069-erickb "View erickb's Profile")** - [![erickb's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/4069-erickb "View erickb's Profile") Topic Author - [ Away](/forum/user/4069-erickb) Less More - Posts: 2697 - Thank you received: 74 - - 7 years 1 month ago - 7 years 1 month ago [\#310552](#310552) by [erickb](/forum/user/4069-erickb "View erickb's Profile") Replied by *[erickb](/forum/user/4069-erickb "View erickb's Profile")* on topic *[infinite\_scroll cree une rupture dans le flux](/forum/5-support-en-francais-french-support-/897468-infinite-scroll-cree-une-rupture-dans-le-flux#310552 "-- HikaShop version -- : 4.1.0 Bonjour dans la liste des produits infinite_scroll cree une rupture car il ajoute un conteneur var div = d.createElement('div'); ce qui fait qu'on se retrouve avec des vides entre les elements qui ne finissent pas une ligne est il possible d'éviter ce code et de charger les elements sans conteneur a la suite des autres dans le conteneur principal? merci")* j'ai contourne le probleme en en mettant 12 a chaque fois 4x3 ou 3x4 ca resoud le probleme passer a flex est une excellente nouvelle, je n'utilise plus que flex et grid et je n'ai quasiment jamais utilise float mais plutot inline-block mais ca ne résoudra pas le problème du conteneur, il faudrait tout envoyer a la suite sans conteneur pour chaque groupe ce serait bien aussi dans une prochaine version de faire le backend en flex box pour l'edition des produits hikashop_product_edition_tab_1.hk-container-fluid display:flex on peut jouer sur order pour les placer comme on veut (c'est ce que je fais avec (backend_custom.css) merci Last edit: 7 years 1 month ago by [erickb](/forum/user/4069-erickb "View erickb's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vODk3NDY4LWluZmluaXRlLXNjcm9sbC1jcmVlLXVuZS1ydXB0dXJlLWRhbnMtbGUtZmx1eD90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86287 - Thank you received: 14264 - - 7 years 1 month ago [\#310570](#310570) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[infinite\_scroll cree une rupture dans le flux](/forum/5-support-en-francais-french-support-/897468-infinite-scroll-cree-une-rupture-dans-le-flux#310570 "-- HikaShop version -- : 4.1.0 Bonjour dans la liste des produits infinite_scroll cree une rupture car il ajoute un conteneur var div = d.createElement('div'); ce qui fait qu'on se retrouve avec des vides entre les elements qui ne finissent pas une ligne est il possible d'éviter ce code et de charger les elements sans conteneur a la suite des autres dans le conteneur principal? merci")* Le backend passera en flex aussi vu que les deux se basent sur le même code CSS. The following user(s) said Thank You: [erickb](/forum/user/4069-erickb "View erickb's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vODk3NDY4LWluZmluaXRlLXNjcm9sbC1jcmVlLXVuZS1ydXB0dXJlLWRhbnMtbGUtZmx1eD90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[erickb](/forum/user/4069-erickb "View erickb's Profile")** - [![erickb's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/4069-erickb "View erickb's Profile") Topic Author - [ Away](/forum/user/4069-erickb) Less More - Posts: 2697 - Thank you received: 74 - - 6 years 6 months ago - 6 years 6 months ago [\#316899](#316899) by [erickb](/forum/user/4069-erickb "View erickb's Profile") Replied by *[erickb](/forum/user/4069-erickb "View erickb's Profile")* on topic *[infinite\_scroll cree une rupture dans le flux](/forum/5-support-en-francais-french-support-/897468-infinite-scroll-cree-une-rupture-dans-le-flux#316899 "-- HikaShop version -- : 4.1.0 Bonjour dans la liste des produits infinite_scroll cree une rupture car il ajoute un conteneur var div = d.createElement('div'); ce qui fait qu'on se retrouve avec des vides entre les elements qui ne finissent pas une ligne est il possible d'éviter ce code et de charger les elements sans conteneur a la suite des autres dans le conteneur principal? merci")* Je reviens sur cet ancien sujet Il serait possible d’éviter tout ça en utilisant tout simplement le nouveau HTML loading=Lazy Qui est assez bien supporté actuellement et en cours d’implémentation dans Safari [ caniuse.com/#feat=loading-lazy-attr](https://caniuse.com/#feat=loading-lazy-attr) Contourné actuellement en utilisant display=contents Last edit: 6 years 6 months ago by [erickb](/forum/user/4069-erickb "View erickb's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vODk3NDY4LWluZmluaXRlLXNjcm9sbC1jcmVlLXVuZS1ydXB0dXJlLWRhbnMtbGUtZmx1eD90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86287 - Thank you received: 14264 - - 6 years 6 months ago [\#316910](#316910) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[infinite\_scroll cree une rupture dans le flux](/forum/5-support-en-francais-french-support-/897468-infinite-scroll-cree-une-rupture-dans-le-flux#316910 "-- HikaShop version -- : 4.1.0 Bonjour dans la liste des produits infinite_scroll cree une rupture car il ajoute un conteneur var div = d.createElement('div'); ce qui fait qu'on se retrouve avec des vides entre les elements qui ne finissent pas une ligne est il possible d'éviter ce code et de charger les elements sans conteneur a la suite des autres dans le conteneur principal? merci")* Bonjour, Je dois avoué que vous m'avez perdu. Quel est le rapport entre le lazy loading des images et le soucis avec le Code: <div style="clear:both"></div> qui se rajoutait entre les pages du listing en mode infinite scroll ? Notez aussi que flexbox est déjà dans HikaShop depuis, et que donc les soucis mentionnés ici n'apparaissent plus. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vODk3NDY4LWluZmluaXRlLXNjcm9sbC1jcmVlLXVuZS1ydXB0dXJlLWRhbnMtbGUtZmx1eD90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[erickb](/forum/user/4069-erickb "View erickb's Profile")** - [![erickb's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/4069-erickb "View erickb's Profile") Topic Author - [ Away](/forum/user/4069-erickb) Less More - Posts: 2697 - Thank you received: 74 - - 6 years 6 months ago [\#316958](#316958) by [erickb](/forum/user/4069-erickb "View erickb's Profile") Replied by *[erickb](/forum/user/4069-erickb "View erickb's Profile")* on topic *[infinite\_scroll cree une rupture dans le flux](/forum/5-support-en-francais-french-support-/897468-infinite-scroll-cree-une-rupture-dans-le-flux#316958 "-- HikaShop version -- : 4.1.0 Bonjour dans la liste des produits infinite_scroll cree une rupture car il ajoute un conteneur var div = d.createElement('div'); ce qui fait qu'on se retrouve avec des vides entre les elements qui ne finissent pas une ligne est il possible d'éviter ce code et de charger les elements sans conteneur a la suite des autres dans le conteneur principal? merci")* l'infini scroll actuellement ajoute un div qui contient les nouveaux elements dans un groupe et cree donc une rupture, on se retrouve avec des lignes incomplètes (avec en plus ce clear both) et bien sur en plus ca nécessite encore un javascript Le lazy loading évite tout ca J'utilisais jusque la display:contents; sur ces div pour les faire disparaitre Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vODk3NDY4LWluZmluaXRlLXNjcm9sbC1jcmVlLXVuZS1ydXB0dXJlLWRhbnMtbGUtZmx1eD90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86287 - Thank you received: 14264 - - 6 years 6 months ago [\#316960](#316960) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[infinite\_scroll cree une rupture dans le flux](/forum/5-support-en-francais-french-support-/897468-infinite-scroll-cree-une-rupture-dans-le-flux#316960 "-- HikaShop version -- : 4.1.0 Bonjour dans la liste des produits infinite_scroll cree une rupture car il ajoute un conteneur var div = d.createElement('div'); ce qui fait qu'on se retrouve avec des vides entre les elements qui ne finissent pas une ligne est il possible d'éviter ce code et de charger les elements sans conteneur a la suite des autres dans le conteneur principal? merci")* Bonjour, Je comprends bien ce que vous dites sur les soucis que vous avez avec le système actuel. Mais je ne vois pas en quoi le lazy loading sera utilisable pour faire un système d'infinite scroll. Le lazy loading permet de ne charger que les images visibles en priorité et de décaler le chargement des autres images plus part pour afficher la page plus rapidement. Le but d'une pagination ou d'un "inifinite scroll" est de ne charger qu'un set limité d'éléments sur la page pour éviter de surcharger le serveur avec des pages trop grosses (HTML, ressources, etc). Le lazy loading des images pourrait être ajouté, mais cela ne changerait pas le fait qu'on ne puisse pas charger tous les éléments d'un coup car cela consommerait trop de ressources sur le serveur. D'ailleurs, en aparté, il existe déjà des extensions pour Joomla pour rajouté du lazy loading sur les images de vos pages, y compris les pages HikaShop: [ extensions.joomla.org/extension/lazy-load-for-joomla/](https://extensions.joomla.org/extension/lazy-load-for-joomla/) The following user(s) said Thank You: [erickb](/forum/user/4069-erickb "View erickb's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vODk3NDY4LWluZmluaXRlLXNjcm9sbC1jcmVlLXVuZS1ydXB0dXJlLWRhbnMtbGUtZmx1eD90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop- Install & Update- Product & Category Display- Content Creation- Sales and Orders- - Orders management- - Reports & Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import & Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel & Slider- - Mass Actions- - Filters & Search- - Discount & Coupon- - Feature Request- Integrations- Showcase- General Talk about HikaShop- Development- - HikaShop 3.0 Beta- Translation- Commercial Jobs HikaShop Components- HikaMarket- - Market: Feature requests- - Market: How to?- - Market: Bug Report- HikaSerial- - General talk about HikaSerial- - Serial: Bug Report- - Serial: How to?- - Support en Français de HikaSerial (French Support)- - HikaSubscription- HikaAuction- - Auction: Feature requests- - Auction: How to?- - Auction: Bug report Hikashop around the world- Support en Français (French Support)- Russian- - FAQ. Курс выживания с Hikashop. Частые вопросы и о- - Расширения Hikashop- - Наши сайты на Hikashop- 日本語版サポート(Japanese Support)- Thai- German Archives- Bug Report- How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.237 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)