使用jQuery Lazyload插件实现背景图懒加载失效问题求助

1. 函数名大小写错误 #

你定义的懒加载函数是imgLazy()，但在ready回调里调用的是imglazy()——JavaScript对大小写敏感，这会直接导致懒加载函数未被执行。

2. 插件默认不支持背景图懒加载 #

这款lazyload插件默认是为<img>标签设计的，只会自动处理img元素的src和data-src属性。你用的是<div>的background-image，插件无法自动识别并替换背景图，必须自定义加载逻辑。

3. 代码语法错误 #

$(document).ready的代码块最后缺少闭合的});，会导致整个ready回调无法正常解析执行。

修复后的代码示例 #

JavaScript部分：

function set_attr() {
    //... 之前的代码
    $('.banner-and-background').attr('data-src', 'path/myImage.jpg');
    $('.banner-and-background').css('background-image', "url(" + 'path/myImage_min.jpg' + ")");
}

function imgLazy() {
    $('div.lazyload').lazyload({
        effect: 'fadeIn',
        // 自定义加载逻辑，处理背景图替换
        load: function() {
            var $this = $(this);
            var highResUrl = $this.attr('data-src');
            $this.css('background-image', 'url(' + highResUrl + ')');
        }
    });
}

$(document).ready(function() {
    set_attr();
    imgLazy(); // 修正函数名大小写
}); // 补上缺失的闭合括号

HTML部分（无需修改）：

<div class="banner-and-background lazyload"></div>

额外注意事项 #

• 确认插件版本支持自定义load回调，若版本过旧可能需要升级插件。
• 检查图片路径path/myImage.jpg和path/myImage_min.jpg是否正确，避免因路径错误导致图片无法加载。

内容的提问来源于stack exchange，提问作者Eric Kim