Question

我创建了一个自定义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);

我希望肖像图像填充其父级的宽度，但溢出父级的底部。这似乎工作正常。然而，应该具有景观分类的全景图像（有2个）正被jQuery看作肖像。也就是说，直到你刷新页面。如果您单击“图库”菜单项或点击刷新，插件突然工作，您可以看到风景图像变为不透明度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键才能正常工作...

Answer 1

我猜它必须与图片的加载方式有关。

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

而是挂钩.load() event。

jQuery脚本在初始页面加载时不执行

1 个答案: