jquery - 使用 window.resize 在图像上再次运行加载函数？

Question

我有这样的设计:

<img class="imgtest" src="img.png" onload="scaleimg(event)" />

现在，我想再次调用 scaleimg(event) 函数，因为在重新调整窗口大小时图像具有 .imgtest 类。

我已经试过了，但是没有用。

$(window).resize(function() {
     $("img").one('load', function(){
         scaleimg(event);
     });
    });

帮我修一下。感谢您的帮助。

Answer 1

您应该避免使用内联 javascript - 对于您的问题，您可以在 DOM 准备就绪时运行一次 scaleimg()，然后在窗口上触发调整大小事件时再次运行:

$(document).ready(function() {
    // When DOM is ready, go through each <img> with the class '.imgtest'
    $('img.imgtest').each(function() {
        scaleimg(event);
    });

    // Listen to resize event on $(window)
    $(window).resize(function() {
        $('img.imgtest').each(function() {
            scaleimg(event);
        });        
    });
});

更好的是，您可以在 DOM 准备就绪时通过链接再次触发 .resize()，从而节省几行代码:

$(document).ready(function() {
    // Listen to resize event on $(window)
    $(window).resize(function() {
        $('img.imgtest').each(function() {
            scaleimg(event);
        });        
    }).resize();  // Notice the chaining
});