Question

我正在尝试优化我的网站以进行延迟加载。用户将使用媒体查询进入我的站点，并且如果用户的屏幕是＆lt;用户屏幕的大小，则检测用户屏幕的大小。 420px然后将加载移动图像，如果不加载大图像。我已经做到了这一点：

HTML

<img src='/loading-img.jpg' data-large-src='/media/large-img' data-mobile-src='/media/mobile-img'>

的jQuery

$(document).ready(function() {
    // run test on initial page load
    checkSize();

    // run test on resize of the window
    $(window).resize(function(){
      checkSize();
    });
});

//Function to the css rule
function checkSize(){
    if ($("#check_screen").css("display") == "none" ){
        $('img').each(function() {
        $(this).attr('src', $(this).attr('data-mobile-src'));
      });
    }

    else{
        $('img').each(function() {
        $(this).attr('src', $(this).attr('data-large-src'));
      });
    }
}

在检测到要显示的图像后，我不希望它们全部加载。相反，我只想加载视口下显示的图像和200px。我该如何做到这一点？

Answer 1

你正在做不必要的工作; HTML5已经提供了使用srcset和sizes属性执行此操作的方法（除router.get('/:url', (req, res) => { Markets.listSites(req, res, 'login-markets', 'markets/index'); });属性外，该属性用作旧浏览器的后备）。

语法示例：

src

检测到视口大小后延迟加载图像

1 个答案: