“裁剪”图像的脚本间歇性地运行。

Question

I'm using some javascript to cause images to appear to be cropped. I essentially find images with a height over 400px, find how many pixels over 400px they are, split it, and make those negative margins on the top and bottom. I then wrap the image in a div that acts as a frame, behind which the image sits

For some reason, the script runs occasionally. Some times, it will correctly crop all .featured-image img images over 400px in height (there is only one featured images on the home page, and it requires cropping). Other times, the script doesn't detect any such image and thus does no cropping.

I run the script inside a $(document).ready() call, so I'm not sure what's causing what seems to be a race condition.

Links

The site: http://new.technoheads.org/ (Refresh a few times to see what I mean)

The script: http://new.technoheads.org/wp-content/themes/Technoheads-Theme/js/app.js (lines in question are 13-20)

Incorrect: http://technoheads.org/grabs/DK6.png

Correct: http://technoheads.org/grabs/GQP.png

Answer 1

You're checking the height properties of the image, which don't necessarily exist on document ready (document ready doesn't mean images have been loaded). Either bind that function inside $(window).load() , or an $('img').load() function.

Example:

$(".featured-image img").load(function() {
    var $e = $(this);

    if ( $e.height < 400 ) return;

    var overflow = featuredHeight - $e.height();
    var top      = overflow / 2;
    var bottom   = overflow / 2;

    if ( overflow % 2 == 1 ) top++;

    $e.css({
        "margin-top": top + "px", 
        "margin-bottom": bottom + "px"
    });
});