Mobile first-SCSS-Grid & Flex

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hello there, rafet! 👋

  Nice to see you complete another challenge! 😀 Nice work on this one! 🙌

  A few things I'd like to suggest are,

  • Preloading the slider images so that there is no delay between when the next slide is clicked (and a request is made for the image for the first time) and when the image actually appears on the screen.
  • Adding object-fit: cover to the images so that they are clipped and do not distort when the size of the page changes.

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  rafet•925

  @rafetbasturkPosted almost 4 years ago

  @ApplePieGiraffe

  Hello! 👋

  Thanks for your crucial suggests yet again. I changed my code accordingly. I used html preloading as below for each image. I hope it is the right way. If not can you please correct it?

  <link rel="preload" as="image" href="./images/desktop-image-hero-1.jpg" type="image/jpg" crossorigin="anonymous">

  Happy coding! 😁

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @rafetbasturk

  Hey, rafet! 👋

  As far as I know, that method of preloading images in your HTML should work just fine. 😀 Just as a tip, another way you can preload images is to do it in your JS by creating a simple preload function and then calling it with the file paths of the images you want to preload, like so,

  function preloadImg(url) {
      new Image().src = url;
  }
  
  preloadImg('./img/image-1.png');
  preloadImg('./img/image-2.png');
  preloadImg('./img/image-3.png');
  

  Keep it up! 👍

  0