0

I have a website I am working on that has an image gallery, and the user is uploading huge images. The div I have the image gallery containing is set to a certain 400px width to match the layout. The issue I am running into is on page load, for a split second, the first image in the gallery loads on the page at normal size (huge), and then the css kicks in and resizes the image to 400px. I am wondering if there is a way to target and change image size before the site code is rendered. Something like:

jQuery( window ).load(function($) {
    //step 1: find the image using the unique css class it is inside
    //step 2: resize image to 400px
    //step 3: let rest of site html/css/jquery load
});

I am using $(window).load instead of $(document).ready in an attempt to target the image before html/css/jquery kicks in. Any insight/help on this topic would be greatly appreciated.

Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
Zach Smith
  • 5,490
  • 26
  • 84
  • 139
  • can you put the actual code in? (step 2) – Ivan Sep 07 '17 at 13:55
  • 1
    Please provide a minimal, [verifiable, complete example](https://stackoverflow.com/help/mcve). Also, you've got it the wrong way round: [document.ready happens before document.load](https://stackoverflow.com/questions/3698200/window-onload-vs-document-ready) – Tijmen Sep 07 '17 at 13:56
  • document.ready fires before window.load. window.load fires when all page assets, css, scripts, images are downloaded. Put your css in head section of page. – Amit Kumar Singh Sep 07 '17 at 13:59
  • I think it's bad idea it will increase the page load time When you upload any image at that time make thumbnail image and display that. – Pankaj Sharma Sep 07 '17 at 14:00
  • You could use an image resizing software in the backend and serve smaller images to increase page load speed :) – Jacob Raccuia Sep 07 '17 at 14:12

1 Answers1

1

Try adding the width and height attributes to the image element. Your CSS will override these properties when applying styles to a specific class. Furthermore, you don't need to mess with JS.

<img src="image.jpg" width="400" height="auto">
JasonK
  • 5,214
  • 9
  • 33
  • 61