javascript - "crop"图像的脚本间歇性运行。

Question

我正在使用一些 javascript 使图像看起来像是被裁剪了。我基本上是找到高度超过 400 像素的图像，找出它们有多少像素超过 400 像素，将其拆分，并在顶部和底部制作负边距。然后，我将图像包裹在充当框架的 div 中，图像位于其后

出于某种原因，脚本偶尔会运行。有时，它会正确裁剪所有高度超过 400px 的 .featured-image img 图片(主页上只有一张特色图片，需要裁剪)。其他时候，脚本不会检测到任何此类图像，因此不会进行裁剪。

我在 $(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

Answer 1

您正在检查图像的 height 属性，该属性不一定存在于 document ready 上(document ready 并不意味着图像已加载)。在 $(window).load() 或 $('img').load() 函数中绑定(bind)该函数。

例子:

$(".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"
    });
});