Question

我正在使用一些javascript检查我的所有图像的宽度，并添加一个类依赖。

看起来像这样：

$(document).ready(function(){
// check each image in the .blogtest divs for their width. If its less than X make it full size, if not its poor and keep it normal
var box = $(".blogtest");
box.find("img.buildimage").each(function() {
   var img = $(this), width = img.width();
   if (width >= 700) {
      img.addClass("buildimage-large");
   } else if (width < 700) {
      img.addClass("buildimage-small");
   }
}); 
});

问题是，当您第一次访问页面时，图像没有添加类，而只是在刷新页面时它们才起作用。

对此有何解决方法？

Answer 1

jQuery的.ready处理程序不会等待加载样式表或图像等外部内容：

如果代码依赖于加载的资源（例如，如果需要图像的尺寸），则应将代码放在load事件的处理程序中。

jQuery中的加载事件处理程序如下所示：

$(document).on('load', function() {
    // Your code here
});

它在页面刷新上工作的原因可能是由于浏览器缓存了图像（因此它们在浏览器完成解析HTML之前已经准备就绪。

Answer 2

您需要使用加载处理程序，因为当触发就绪处理程序时，可能不会加载图像，因此第一次宽度将为0，第二次图像可能会在浏览器中缓存，从而使加载速度更快当触发就绪处理程序时，图像可能已经加载，因此它正在工作

$(document).ready(function () {
    // check each image in the .blogtest divs for their width. If its less than X make it full size, if not its poor and keep it normal
    var box = $(".blogtest");
    box.find("img.buildimage").on('load', function () {
        var img = $(this),
            width = img.width();
        if (width >= 700) {
            img.addClass("buildimage-large");
        } else if (width < 700) {
            img.addClass("buildimage-small");
        }
    }).filter(function () {
        //if the image is already loaded manually trigger the event
        return this.complete;
    }).trigger('load');
});

但要记住的另一点是，当映像已经加载时触发就绪处理程序时，注册的load处理程序将不会被触发，因此在注册事件处理程序之后我们需要过滤掉已经加载的图像，然后手动触发加载事件，以便对于这些图像，加载事件将被触发

Javascript代码仅在页面刷新后工作，而不是首次查看

2 个答案: