CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Zach Smith
Zach Smith

Reputation: 5674

Using jQuery to target an image before page loads

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.

Upvotes: 0

Views: 301

Answers (1)

JasonK
JasonK

Reputation: 5294

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">

Upvotes: 1

Related Questions