0

我正在使用一些 javascript 来使图像看起来被裁剪。我基本上找到高度超过 400 像素的图像，找出超过 400 像素的像素数，将其拆分，然后在顶部和底部设置负边距。然后我将图像包装在充当框架的 div 中，图像位于框架后面

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

我在调用中运行脚本$(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 回答