0

我创建了一个自定义 jQuery 插件，它为我的网站做了一些简单的图像调整。这是网站：http ://www.daemondeveloper.com/photography/gallery.php

如您所见，出于调试目的，我将纵向图像的不透明度设置为 0.5，将横向图像的不透明度设置为 1。我使用此自定义插件将图像分类为纵向或横向：

(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);

我希望肖像图像填充其父级的宽度但溢出父级的底部。这似乎工作正常。但是，jQuery 将应具有风景分类的全景图像（有 2 个）视为肖像。也就是说，直到您刷新页面。如果您单击“图库”菜单项或单击“刷新”，插件会突然工作，您可以看到横向图像变为不透明度 1 并按应有的方式填充父项。

那么是什么导致jQuery仅在再次刷新页面后才触发？我猜它一定与图片的加载方式有关。

最后，这是运行插件功能的代码：

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

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

});

这是在 document.ready 上运行的

更新：实际上使用刷新或 F5 并不能解决问题。出于某种原因，只有当您单击图库菜单项或将焦点放在地址栏上并按 Enter 时，它才会起作用...

4

1 回答 1

3

我猜它一定与图片的加载方式有关。

是的，您将无法在加载之前获取图像的尺寸。刷新时，图像将在 DOMready 之前从缓存中加载。

相反，挂钩.load()事件。

于 2012-08-01T16:32:15.017 回答