0

私はいくつかのJavaScriptを使用して、画像がトリミングされているように見せています。私は基本的に、高さが 400px を超える画像を見つけ、それらが 400px を超えるピクセル数を見つけて分割し、上下に負の余白を作ります。次に、フレームとして機能する div で画像をラップし、その後ろに画像を置きます

何らかの理由で、スクリプトが時々実行されます。場合によっては、高さが 400px を超えるすべての画像が正しくトリミングされることが.featured-image imgあります (ホームページには注目の画像が 1 つしかなく、トリミングが必要です)。それ以外の場合、スクリプトはそのような画像を検出せず、トリミングを行いません。

呼び出し内でスクリプトを実行する$(document).ready()ので、競合状態と思われる原因が何なのかわかりません。

リンク

サイト: http://new.technoheads.org/ (何を意味するかを確認するために数回更新してください)

スクリプト: http://new.technoheads.org/wp-content/themes/Technoheads-Theme/js/app.js (問題の行は 13-20 です)

不正解: http://technoheads.org/grabs/DK6.png

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

4

1 に答える 1

2

ドキュメントの準備ができているとは限らない画像のプロパティをチェックしていheightます (ドキュメントの準備ができているからといって、画像が読み込まれているわけではありません)。その関数を 内$(window).load()にバインドするか、関数にバインドし$('img').load()ます。

例：

$(".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"
    });
});
于 2013-01-11T17:13:46.947 に答える