jQuery script not executing on initial page load

Question

I have created a custom jQuery plugin that does some simple image resizing for my website. Here is the site: http://www.daemondeveloper.com/photography/gallery.php

As you can see, for debugging purposes I have made portrait images have an opacity of 0.5 and landscape images an opacity of 1. I classify images as portrait or landscape using this custom plugin:

(function($) {

$.fn.superFit = function(options) {

    var $this = $(this);
    var parent = $this.parent();
    var parentW = parent.width();
    var parentH = parent.height();
    var imgW = $this.width();
    var imgH = $this.height();

    var imgRatio = imgH / imgW;
    var parentRatio = parentH / parentW;



        if(imgRatio < parentRatio) //We have a landscape image
        {
            //First set the height of image to be 100%;
            $this.css('height', '100%');
            imgW = $this.width();
            parentW = parent.width();

            //Now center the image
            $this.css('margin-left', -(imgW/2)+(parentW/2));

        }else{ //We have a portrait image
            $this.css('width', '100%');
            $this.css('opacity', '0.5');
        }



}
    })(jQuery);

I want portrait images to fill up the width of its parent but overflow off the bottom of the parent. This seems to be working fine. However, the panoramic images (there are 2) that should have a landscape classification are being looked at by the jQuery as a portrait. That is, until you refresh the page. If you click on the Gallery menu item or hit refresh, all of a sudden the plugin works and you can see the landscape images become opacity 1 and fill up the parent as they should.

So what is causing the jQuery to fire only after refreshing the page again?? I am guessing it must have something to do with the way the pictures are loaded or something.

Finally, here is the code that runs the plugin function:

$('#gallery ul li').each(function() {
var $frame = $(this).children('div');

    var fw = $frame.width();
    var fh = $frame.height();
    $frame.children('img').superFit(); 

});

This is being ran on document.ready

UPDATE: Actually using refresh or F5 does NOT fix the issue. For some reason only when you click the Gallery menu item or get focus on the address bar and hit Enter does it work...

yeah i have the .each() event I showed you in $(document).ready(function(){}) — Matt Hintzke
– Matt Hintzke, Commented Aug 1, 2012 at 16:30
Have you tried using $(window).load(function() { instead of $(document).ready(function ()? — j08691
– j08691, Commented Aug 1, 2012 at 16:34
@Pabloker: As a side note: .ready() triggers after the DOM is loaded but before any images are loaded. — Nope
– Nope, Commented Aug 1, 2012 at 16:41
@FrançoisWahl Yes, is true. I cut and pasted the wrong code. I saw that when It was too late. I wanted to put $(window).load(function() { //code } — Pablo Claus
– Pablo Claus, Commented Aug 1, 2012 at 16:51

Bergi · Accepted Answer · 2012-08-01 16:32:15Z

3

I am guessing it must have something to do with the way the pictures are loaded or something.

Yes, you won't be able to get the dimensions of an image before it is loaded. On refresh the images will load from cache before DOMready.

Instead, hook on the .load() event.

answered Aug 1, 2012 at 16:32

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Matt Hintzke Over a year ago

ill try it out. so the .load() should go around my .each event?

Bergi Over a year ago

Yes, replace $.ready with $(window).load. Alternatively, you could check for each image whether it is already loaded and set up individual load handlers if not.

Matt Hintzke Over a year ago

AWESOME! thanks a lot, i used $(window).load() like you and j08691 said and it worked. Could you please explain what the difference is? load() waits for all elements to be completely loaded or what? And why was it only with some pictures and not others?

Bergi Over a year ago

DOMready (and its jQuery equivalent) first when the HTML is parsed, the DOM tree is built and can be manipulated. window.onload fires when all ressources in the page are loaded - also read the linked docs.

Nope Over a year ago

@MattHintzke: If memory serves right, use visibility hidden instead of display none. visibility: hidden hides the element while display: none removes the element completely from the document.

|

Collectives™ on Stack Overflow

jQuery script not executing on initial page load

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related