Question

在应用悬停效果之前，我使用加载功能预加载图像。

$("img").load(function(){ //image preloading

//some function & variable setting

    $listingItems.hover(
        function(){
            //effect
        },
        function(){
            //effect back
        }
    )

}) // load

我的问题是，只有重新加载页面时效果才有效。当我第一次来到页面时，图像被加载但没有悬停效果。

您可以在这里查看来源： http://meodai.ch/rundum/shop.html

我做错了什么？有人可以帮忙吗？在执行函数之前是否有另一种简单的方法来预加载图像？

Answer 1

如果图像来自某些浏览器中的缓存，则load事件不会触发，但通过检查.complete属性并使用.one()进行操作可以解决此问题确保load事件处理程序仅触发一次，如下所示：

$("img").one('load', function(){
  //current code
}).each(function() {
  if(this.complete) $(this).load();
});

这会循环显示图像，如果它们是.complete（加载真的快速或从缓存中加载），它会触发load事件处理程序（如果它已经运行）（ 真正的快速加载案例），而不是汗水，这就是.one()的用途。

图像预加载问题（使用$（“img”）。load（））

1 个答案: