Question

我正在为图片编写自己的初始代码，其中包括获取窗口大小并使用data-medium或data-original替换img src，具体取决于窗口大小。我还将其与航点包括在一起，以便在滚动时它会淡化图像。

我有一个jsFiddle设置＆gt; https://jsfiddle.net/qkguedu9/但我的问题是这样 - 无论窗口大小如何，它总是会拉入data-medium图像。我基本上把JS包括在内，即使这样，也不应该出错。

var browser_width,
    browser_height;

//
resizeHandler = function() {
    browser_width = $(window).width();
    browser_height = $(window).height();
}

//
$.fn.loadImage = function() {   

    return this.each(function() {

        if (browser_width > 768) {
            var toLoad = $(this).data('original');
        } else {
            var toLoad = $(this).data('medium');
        }

        var $img = $(this);

        $('<img />').attr('src', toLoad).imagesLoaded(function() {
            $img.attr('src', toLoad).addClass('loaded').removeClass('loading');
        });

    });

};

//
$(document).ready(function() {

    resizeHandler();

    //
    $('.lazy').each(function() {
        var $img = $(this);
        $img.waypoint(function() {
            $img.loadImage();
        }, { offset: '125%' });
    });

});

Answer 1

它看起来像是一个缓存问题。不太确定为什么会发生这种情况，这可能是某种竞争条件。如果在if语句中检查窗口宽度，它可以正常工作。

$.fn.loadImage = function() {   

return this.each(function() {

    if ($(window).width() > 768) {
        var toLoad = $(this).data('original');
    } else {
        var toLoad = $(this).data('medium');
    }

    var $img = $(this);

    $('<img />').attr('src', toLoad).imagesLoaded(function() {
        $img.attr('src', toLoad).addClass('loaded').removeClass('loading');
    });

});

};

现在这是你的小提琴：

https://jsfiddle.net/qkguedu9/1/

图像数据标签未打开加载/调整大小

1 个答案: