Async image gallery in React












0














I am creating an image gallery in react. I am loading all the thumbnails of the images on one page, rendering the array of images stored in the initial state with map().
What I would like to do is to load the image thumbnails in one by one (once the first loaded fade it in) and then the same with the second etc. like a domino effect. What is the best way to get around the problem?
I have tried to map the array and set an onload on the img tag but that just fades all the images in at once, once all are loaded.






reactjs image image-gallery







share|improve this question



























    0














    I am creating an image gallery in react. I am loading all the thumbnails of the images on one page, rendering the array of images stored in the initial state with map().
    What I would like to do is to load the image thumbnails in one by one (once the first loaded fade it in) and then the same with the second etc. like a domino effect. What is the best way to get around the problem?
    I have tried to map the array and set an onload on the img tag but that just fades all the images in at once, once all are loaded.






    reactjs image image-gallery







    share|improve this question

























      0












      0








      0







      I am creating an image gallery in react. I am loading all the thumbnails of the images on one page, rendering the array of images stored in the initial state with map().
      What I would like to do is to load the image thumbnails in one by one (once the first loaded fade it in) and then the same with the second etc. like a domino effect. What is the best way to get around the problem?
      I have tried to map the array and set an onload on the img tag but that just fades all the images in at once, once all are loaded.






      reactjs image image-gallery







      share|improve this question













      I am creating an image gallery in react. I am loading all the thumbnails of the images on one page, rendering the array of images stored in the initial state with map().
      What I would like to do is to load the image thumbnails in one by one (once the first loaded fade it in) and then the same with the second etc. like a domino effect. What is the best way to get around the problem?
      I have tried to map the array and set an onload on the img tag but that just fades all the images in at once, once all are loaded.






      reactjs image image-gallery




      reactjs image image-gallery






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 13 '18 at 1:35









      Gabriella Csernus

      5210




      5210
























          1 Answer
          1






          active

          oldest

          votes


















          0














          If you want to fadein the image as soon as you load the image, you wont get the domino effect you want because you will load the images at different times. For example, maybe image 4 fadesin first, then image 6, then image 1, or maybe all the images load at once and fadein at the same time.



          I recommend once all the images are loaded, you fadein image #1, delay 1 second, fadein image #2, delay 1 second, fadein image #3, to get your Domino effect.






          share|improve this answer





















          • Can I load first in and then fade it in, and then start loading the next? If yes how? At the moment my images are in this.state.ImageUrls and I am mapping through them like so: ImageUrls.map((ImageUrl, index)=> { return (<div ><img key={index} id="thumbnail" onLoad={this.imageLoaded} src={ImageUrl} className={this.state.galleryContent} onClick={(e) => this.openModal(index, ImageUrl, e)}/></div>)})}
            – Gabriella Csernus
            Nov 13 '18 at 12:07












          • Change to className=${this.state.galleryContent} ${this.state.imageFadein[index] ? 'fadein' : ''}. Then in your imageLoaded() function, detect when the last of all images are loaded, then perform your domino effect to fadein each subsequent image every second via setTimeout(function() { this.setState({ this.state.imageFadein[0]: true }); setTimeout(function() { this.setState({ this.state.imageFadein[1]: true }); }, 1000); }, 1000);
            – Shawn Andrews
            Nov 13 '18 at 20:06










          • your this.state.galleryContent should have opacity: 0, and the fadein class is just a simply opacity change: .fadein { animation: fadein 2s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
            – Shawn Andrews
            Nov 13 '18 at 20:11












          • Do you mean this.setState({ imageFadein[0]: true }); and not this.setState({ this.state.imageFadein[0]: true }); and am I thinking wrong but do you mean creating a new state called imageFadein and mutating its state, not with with my existing ImageUrls where I have my images?
            – Gabriella Csernus
            Nov 13 '18 at 21:55










          • I have created the new state. Which stores the fadein true or false, which will set the classname, but I get an error in the imageLoaded function this.setState({ imageFadein[0]: true }); hmmm
            – Gabriella Csernus
            Nov 13 '18 at 22:03











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53272513%2fasync-image-gallery-in-react%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          0














          If you want to fadein the image as soon as you load the image, you wont get the domino effect you want because you will load the images at different times. For example, maybe image 4 fadesin first, then image 6, then image 1, or maybe all the images load at once and fadein at the same time.



          I recommend once all the images are loaded, you fadein image #1, delay 1 second, fadein image #2, delay 1 second, fadein image #3, to get your Domino effect.






          share|improve this answer





















          • Can I load first in and then fade it in, and then start loading the next? If yes how? At the moment my images are in this.state.ImageUrls and I am mapping through them like so: ImageUrls.map((ImageUrl, index)=> { return (<div ><img key={index} id="thumbnail" onLoad={this.imageLoaded} src={ImageUrl} className={this.state.galleryContent} onClick={(e) => this.openModal(index, ImageUrl, e)}/></div>)})}
            – Gabriella Csernus
            Nov 13 '18 at 12:07












          • Change to className=${this.state.galleryContent} ${this.state.imageFadein[index] ? 'fadein' : ''}. Then in your imageLoaded() function, detect when the last of all images are loaded, then perform your domino effect to fadein each subsequent image every second via setTimeout(function() { this.setState({ this.state.imageFadein[0]: true }); setTimeout(function() { this.setState({ this.state.imageFadein[1]: true }); }, 1000); }, 1000);
            – Shawn Andrews
            Nov 13 '18 at 20:06










          • your this.state.galleryContent should have opacity: 0, and the fadein class is just a simply opacity change: .fadein { animation: fadein 2s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
            – Shawn Andrews
            Nov 13 '18 at 20:11












          • Do you mean this.setState({ imageFadein[0]: true }); and not this.setState({ this.state.imageFadein[0]: true }); and am I thinking wrong but do you mean creating a new state called imageFadein and mutating its state, not with with my existing ImageUrls where I have my images?
            – Gabriella Csernus
            Nov 13 '18 at 21:55










          • I have created the new state. Which stores the fadein true or false, which will set the classname, but I get an error in the imageLoaded function this.setState({ imageFadein[0]: true }); hmmm
            – Gabriella Csernus
            Nov 13 '18 at 22:03
















          0














          If you want to fadein the image as soon as you load the image, you wont get the domino effect you want because you will load the images at different times. For example, maybe image 4 fadesin first, then image 6, then image 1, or maybe all the images load at once and fadein at the same time.



          I recommend once all the images are loaded, you fadein image #1, delay 1 second, fadein image #2, delay 1 second, fadein image #3, to get your Domino effect.






          share|improve this answer





















          • Can I load first in and then fade it in, and then start loading the next? If yes how? At the moment my images are in this.state.ImageUrls and I am mapping through them like so: ImageUrls.map((ImageUrl, index)=> { return (<div ><img key={index} id="thumbnail" onLoad={this.imageLoaded} src={ImageUrl} className={this.state.galleryContent} onClick={(e) => this.openModal(index, ImageUrl, e)}/></div>)})}
            – Gabriella Csernus
            Nov 13 '18 at 12:07












          • Change to className=${this.state.galleryContent} ${this.state.imageFadein[index] ? 'fadein' : ''}. Then in your imageLoaded() function, detect when the last of all images are loaded, then perform your domino effect to fadein each subsequent image every second via setTimeout(function() { this.setState({ this.state.imageFadein[0]: true }); setTimeout(function() { this.setState({ this.state.imageFadein[1]: true }); }, 1000); }, 1000);
            – Shawn Andrews
            Nov 13 '18 at 20:06










          • your this.state.galleryContent should have opacity: 0, and the fadein class is just a simply opacity change: .fadein { animation: fadein 2s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
            – Shawn Andrews
            Nov 13 '18 at 20:11












          • Do you mean this.setState({ imageFadein[0]: true }); and not this.setState({ this.state.imageFadein[0]: true }); and am I thinking wrong but do you mean creating a new state called imageFadein and mutating its state, not with with my existing ImageUrls where I have my images?
            – Gabriella Csernus
            Nov 13 '18 at 21:55










          • I have created the new state. Which stores the fadein true or false, which will set the classname, but I get an error in the imageLoaded function this.setState({ imageFadein[0]: true }); hmmm
            – Gabriella Csernus
            Nov 13 '18 at 22:03














          0












          0








          0






          If you want to fadein the image as soon as you load the image, you wont get the domino effect you want because you will load the images at different times. For example, maybe image 4 fadesin first, then image 6, then image 1, or maybe all the images load at once and fadein at the same time.



          I recommend once all the images are loaded, you fadein image #1, delay 1 second, fadein image #2, delay 1 second, fadein image #3, to get your Domino effect.






          share|improve this answer












          If you want to fadein the image as soon as you load the image, you wont get the domino effect you want because you will load the images at different times. For example, maybe image 4 fadesin first, then image 6, then image 1, or maybe all the images load at once and fadein at the same time.



          I recommend once all the images are loaded, you fadein image #1, delay 1 second, fadein image #2, delay 1 second, fadein image #3, to get your Domino effect.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 13 '18 at 6:50









          Shawn Andrews

          945616




          945616












          • Can I load first in and then fade it in, and then start loading the next? If yes how? At the moment my images are in this.state.ImageUrls and I am mapping through them like so: ImageUrls.map((ImageUrl, index)=> { return (<div ><img key={index} id="thumbnail" onLoad={this.imageLoaded} src={ImageUrl} className={this.state.galleryContent} onClick={(e) => this.openModal(index, ImageUrl, e)}/></div>)})}
            – Gabriella Csernus
            Nov 13 '18 at 12:07












          • Change to className=${this.state.galleryContent} ${this.state.imageFadein[index] ? 'fadein' : ''}. Then in your imageLoaded() function, detect when the last of all images are loaded, then perform your domino effect to fadein each subsequent image every second via setTimeout(function() { this.setState({ this.state.imageFadein[0]: true }); setTimeout(function() { this.setState({ this.state.imageFadein[1]: true }); }, 1000); }, 1000);
            – Shawn Andrews
            Nov 13 '18 at 20:06










          • your this.state.galleryContent should have opacity: 0, and the fadein class is just a simply opacity change: .fadein { animation: fadein 2s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
            – Shawn Andrews
            Nov 13 '18 at 20:11












          • Do you mean this.setState({ imageFadein[0]: true }); and not this.setState({ this.state.imageFadein[0]: true }); and am I thinking wrong but do you mean creating a new state called imageFadein and mutating its state, not with with my existing ImageUrls where I have my images?
            – Gabriella Csernus
            Nov 13 '18 at 21:55










          • I have created the new state. Which stores the fadein true or false, which will set the classname, but I get an error in the imageLoaded function this.setState({ imageFadein[0]: true }); hmmm
            – Gabriella Csernus
            Nov 13 '18 at 22:03


















          • Can I load first in and then fade it in, and then start loading the next? If yes how? At the moment my images are in this.state.ImageUrls and I am mapping through them like so: ImageUrls.map((ImageUrl, index)=> { return (<div ><img key={index} id="thumbnail" onLoad={this.imageLoaded} src={ImageUrl} className={this.state.galleryContent} onClick={(e) => this.openModal(index, ImageUrl, e)}/></div>)})}
            – Gabriella Csernus
            Nov 13 '18 at 12:07












          • Change to className=${this.state.galleryContent} ${this.state.imageFadein[index] ? 'fadein' : ''}. Then in your imageLoaded() function, detect when the last of all images are loaded, then perform your domino effect to fadein each subsequent image every second via setTimeout(function() { this.setState({ this.state.imageFadein[0]: true }); setTimeout(function() { this.setState({ this.state.imageFadein[1]: true }); }, 1000); }, 1000);
            – Shawn Andrews
            Nov 13 '18 at 20:06










          • your this.state.galleryContent should have opacity: 0, and the fadein class is just a simply opacity change: .fadein { animation: fadein 2s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
            – Shawn Andrews
            Nov 13 '18 at 20:11












          • Do you mean this.setState({ imageFadein[0]: true }); and not this.setState({ this.state.imageFadein[0]: true }); and am I thinking wrong but do you mean creating a new state called imageFadein and mutating its state, not with with my existing ImageUrls where I have my images?
            – Gabriella Csernus
            Nov 13 '18 at 21:55










          • I have created the new state. Which stores the fadein true or false, which will set the classname, but I get an error in the imageLoaded function this.setState({ imageFadein[0]: true }); hmmm
            – Gabriella Csernus
            Nov 13 '18 at 22:03
















          Can I load first in and then fade it in, and then start loading the next? If yes how? At the moment my images are in this.state.ImageUrls and I am mapping through them like so: ImageUrls.map((ImageUrl, index)=> { return (<div ><img key={index} id="thumbnail" onLoad={this.imageLoaded} src={ImageUrl} className={this.state.galleryContent} onClick={(e) => this.openModal(index, ImageUrl, e)}/></div>)})}
          – Gabriella Csernus
          Nov 13 '18 at 12:07






          Can I load first in and then fade it in, and then start loading the next? If yes how? At the moment my images are in this.state.ImageUrls and I am mapping through them like so: ImageUrls.map((ImageUrl, index)=> { return (<div ><img key={index} id="thumbnail" onLoad={this.imageLoaded} src={ImageUrl} className={this.state.galleryContent} onClick={(e) => this.openModal(index, ImageUrl, e)}/></div>)})}
          – Gabriella Csernus
          Nov 13 '18 at 12:07














          Change to className=${this.state.galleryContent} ${this.state.imageFadein[index] ? 'fadein' : ''}. Then in your imageLoaded() function, detect when the last of all images are loaded, then perform your domino effect to fadein each subsequent image every second via setTimeout(function() { this.setState({ this.state.imageFadein[0]: true }); setTimeout(function() { this.setState({ this.state.imageFadein[1]: true }); }, 1000); }, 1000);
          – Shawn Andrews
          Nov 13 '18 at 20:06




          Change to className=${this.state.galleryContent} ${this.state.imageFadein[index] ? 'fadein' : ''}. Then in your imageLoaded() function, detect when the last of all images are loaded, then perform your domino effect to fadein each subsequent image every second via setTimeout(function() { this.setState({ this.state.imageFadein[0]: true }); setTimeout(function() { this.setState({ this.state.imageFadein[1]: true }); }, 1000); }, 1000);
          – Shawn Andrews
          Nov 13 '18 at 20:06












          your this.state.galleryContent should have opacity: 0, and the fadein class is just a simply opacity change: .fadein { animation: fadein 2s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
          – Shawn Andrews
          Nov 13 '18 at 20:11






          your this.state.galleryContent should have opacity: 0, and the fadein class is just a simply opacity change: .fadein { animation: fadein 2s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
          – Shawn Andrews
          Nov 13 '18 at 20:11














          Do you mean this.setState({ imageFadein[0]: true }); and not this.setState({ this.state.imageFadein[0]: true }); and am I thinking wrong but do you mean creating a new state called imageFadein and mutating its state, not with with my existing ImageUrls where I have my images?
          – Gabriella Csernus
          Nov 13 '18 at 21:55




          Do you mean this.setState({ imageFadein[0]: true }); and not this.setState({ this.state.imageFadein[0]: true }); and am I thinking wrong but do you mean creating a new state called imageFadein and mutating its state, not with with my existing ImageUrls where I have my images?
          – Gabriella Csernus
          Nov 13 '18 at 21:55












          I have created the new state. Which stores the fadein true or false, which will set the classname, but I get an error in the imageLoaded function this.setState({ imageFadein[0]: true }); hmmm
          – Gabriella Csernus
          Nov 13 '18 at 22:03




          I have created the new state. Which stores the fadein true or false, which will set the classname, but I get an error in the imageLoaded function this.setState({ imageFadein[0]: true }); hmmm
          – Gabriella Csernus
          Nov 13 '18 at 22:03


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid …



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid …



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53272513%2fasync-image-gallery-in-react%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          -

          Popular posts from this blog

          List item for chat from Array inside array React Native

          Image
          0 This is my code for Chat Box, the window where I have "In" and "Out" messages are appearing. import React, { Component } from "react"; import { StyleSheet, Text, View, TouchableOpacity, TextInput, FlatList, Platform, AsyncStorage } from "react-native"; import Tutor from "../image/krutika.jpg"; import { Container, Header, Left, Input, Body, Right, Thumbnail, Button } from "native-base"; import FontAwesome from "react-native-vector-icons/FontAwesome"; import Ionicons from "react-native-vector-icons/Ionicons"; import Icon1 from "react-native-vector-icons/FontAwesome"; import axios from "axios"; export default class ChatBox extends Component { st...
          Read more

          Thiostrepton

          Image
          Thiostrepton [1] Names Other names Alaninamide, Bryamycin, Thiactin Identifiers CAS Number 1393-48-2   Y 3D model (JSmol) Interactive image ChEMBL ChEMBL468719   N ECHA InfoCard 100.014.304 PubChem CID 16130278 InChI InChI=1S/C72H85N19O18S5/c1-14-26(3)47-63(105)78-30(7)57(99)75-28(5)56(98)76-31(8)58(100)91-72-19-18-40(66-85-43(22-111-66)59(101)77-29(6)55(97)74-27(4)54(73)96)81-52(72)42-21-112-67(83-42)49(34(11)109-69(107)41-20-37(32(9)92)36-16-17-39(79-47)51(95)50(36)80-41)89-60(102)44-24-113-68(86-44)53(71(13,108)35(12)94)90-62(104)45-23-110-65(84-45)38(15-2)82-64(106)48(33(10)93)88-61(103)46-25-114-70(72)87-46/h15-17,20-22,24-26,30-35,39,45,47-49,51-53,79,92-95,108H,4-6,14,18-19,23H2,1-3,7-13H3,(H2,73,96)(H,74,97)(H,75,99)(H,76,98)(H,77,101)(H,78,105)(H,82,106)(H,88,103)(H,89,102)(H,90,104)(H,91,100)/b38-15-/t26-,30-,31-,32-,33+,34+,35+,39+,45+,47-,48-,49-,51-,52+,53+,71+,72+/m0/s1 Key: NSFFHOGKXHRQEW-AIHSUZKVSA-N ...
          Read more

          Caerphilly

          Image
          This article is about the town of Caerphilly. For the cheese of the same name, see Caerphilly cheese. For other uses, see Caerphilly (disambiguation). Caerphilly Welsh: Caerffili Caerphilly Castle Caerphilly Location within Caerphilly Population 30,388  OS grid reference ST1586 Principal area Caerphilly Ceremonial county Gwent Country Wales Sovereign state United Kingdom Post town CAERPHILLY Postcode district CF83 Dialling code 029 Police Gwent Fire South Wales Ambulance Welsh EU Parliament Wales UK Parliament Caerphilly Welsh Assembly Caerphilly List of places UK Wales Caerphilly 51°34′41″N 3°13′05″W  /  51.578°N 3.218°W  / 51.578; -3.218 Coordinates: 51°34′41″N 3°13′05″W  /  51.578°N 3.218°W  / 51.578; -3.218 Caerphilly ( / k aɪər ˈ f ɪ l i / ; Welsh: Caerffili , Welsh pronunciation:  [ˌkɑːɨrˈfɪlɪ] ) is a town and community in South Wales, at the southern end of the Rhymney Valley....
          Read more