Chrome 刷新后不执行 jquery 功能，但在单击链接时执行答案

【问题标题】：Chrome doesn't execute jquery function after refresh but does when link is clickedChrome 刷新后不执行 jquery 功能，但在单击链接时执行
【发布时间】：2016-11-05 08:14:09
【问题描述】：

您好，我还有一个奇怪的问题。我有一个按比例调整图像大小的 jquery 函数。但是，当我刷新页面时它在 chrome 上工作它不完全工作。让我解释。如果您点击主页链接，它会起作用并且所有图像都会调整大小。如果您刷新页面，一些或没有图像被调整大小。这只发生在 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 上正确执行？

【问题讨论】：

这是在其他浏览器中执行的吗？并且您是否尝试为像这样的调整大小函数添加超时 timeout(function(){$('img').imageResize();}, 5000)

标签： javascript jquery html css google-chrome

【解决方案1】：

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

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

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

【讨论】：