圖像數據標籤沒有開啓加載/調整大小

Question

我正在爲圖像編寫我自己的入門代碼，涉及獲取窗口大小並根據窗口大小用data-medium或data-original替換img src。我還將其與路標包括在一起，以便在您滾動時淡入圖像中。

我有一個jsFiddle設置>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/