Question

你好，我有另一个奇怪的问题。我有一个jquery函数，按比例调整图像大小。然而，当我刷新页面时，它不能完全正常工作。让我解释。如果您点击主页链接，它将工作，所有图像都会调整大小。如果刷新页面，则不会调整图像的大小。这只发生在chrome中。它不会发生在Firefox中。

这是jquery

$.fn.imageResize = function(options) {
    var settings = {
        width: 400,
        height: 222
    };

    options = $.extend(settings, options);

    return this.each(function() {
        var $element = $(this);
        var maxWidth = options.width;
        var maxHeight = options.height;
        var ratio = 0;
        var width = $element.width();
        var height = $element.height();

        if ( width > maxWidth ) {
            ratio = maxWidth / width;

            $element.css("width", maxWidth);
            $element.css("height", height * ratio);
        }

        if (height > maxHeight) {
            ratio = maxHeight / height;

            $element.css("height", maxHeight);
            $element.css("width", width * ratio);
        }
    });
}

我的标题包含必要的内容

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="/app/core/views/js/image-resize.js">   </script>

然后我调用页面上的函数

<script type="text/javascript">
    $(document).ready(function() {
        $('img').imageResize();
    });
</script>

<img src="" alt="">

因此，如果您通过链接加载页面，则代码可以正常工作，并且图像会按比例调整大小。如果您点击f5或刷新按钮，则代码无法正常工作，图像将以原始大小显示。

有没有办法确保代码在chrome上正确执行？

Answer 1

您过早地调用.imageResize()，因为$(document).ready()会在内容加载完成之前触发。该方法运行但未找到有效目标。

将其绑定在load窗口，它很可能会按预期工作：

$(window).on('load', function(){
   $('img').imageResize();
})

Chrome在刷新后不会执行jquery功能，但会在点击链接时执行

1 个答案: