Javascript 尝试根据页面宽度调整两幅图像的大小

我从一个JSON文件中提取了两个图像。当浏览器调整大小时，两个图像根据屏幕宽度相应缩小，但在页面加载时，初始图像直到页面调整大小后才会显示。希望有人能帮忙，下面是我的代码：

（函数（）{
"严格使用",；
var url='path to json'；
$.getJSON（url，函数（json）{
var sliderImage=''；
变量类别图像=“”；
$.each（json[0]，函数（i，项）{
幻灯片图像+=''；
类别图像+=''；
});
$（窗口）。调整大小（函数（）{
如果（$（this）.width（）>=800）{
$（'#recipeSlider'）.html（幻灯片图像）；
}else if（$（this）.width（），因为您仅在
窗口中添加图像。调整大小
：

这样做：

(function() {

     'use strict';

     var url = 'path to json';

     $.getJSON(url, function(json) {

         var sliderImage = '';
         var categoryImage = '';

         $.each(json[0], function (i, item) {
             sliderImage += '<img src="' + item.imageSliderURL + '">';
             categoryImage += '<img src="' + item.imageCategoryURL + '">';
             //Make sure images are added on load
             $('#recipeSlider').html(sliderImage).promise().done(function(){
 $('#recipeSlider').html(categoryImage);

（函数（）{
"严格使用",；
var url='path to json'；
$.getJSON（url，函数（json）{
var sliderImage=''；
变量类别图像=“”；
$.each（json[0]，函数（i，项）{
幻灯片图像+=''；
类别图像+=''；
//确保在加载时添加图像
$（'#recipeSlider'）.html（sliderImage.promise（）.done（function（））{
$（'#recipeSlider'）.html（categoryImage）；

}))

}）；
$（窗口）。调整大小（函数（）{
如果（$（this）.width（）>=800）{
$（'#recipeSlider'）.html（幻灯片图像）；
}else if（$（this）.width（）在调整图像大小之前，您不会注入图像。因此，在页面加载时不会显示图像。您可以在“recipeSlider”div中添加默认图像，也可以添加一个在页面加载时调用的函数来添加图像

您应该重构代码，使选择图像的部分位于其自己的函数中。在页面加载和页面大小调整时调用该函数，您应该会得到所需的结果。
以下是您的答案

 (function() {

 'use strict';

 var url = 'path to json';

 $.getJSON(url, function(json) {

     var sliderImage = '';
     var categoryImage = '';

     $.each(json[0], function (i, item) {
         sliderImage += '<img src="' + item.imageSliderURL + '">';
         categoryImage += '<img src="' + item.imageCategoryURL + '">';
     });
     function funLoadImage(){

        if ($(window).width() >= 800) {
            $('#recipeSlider').html(sliderImage);
        } else {
            $('#recipeSlider').html(categoryImage);
        }
     }

     funLoadImage();
     $(window).resize(funLoadImage);

  });
  })();

（函数（）{
"严格使用",；
var url='path to json'；
$.getJSON（url，函数（json）{
var sliderImage=''；
变量类别图像=“”；
$.each（json[0]，函数（i，项）{
幻灯片图像+=''；
类别图像+=''；
});
函数funLoadImage（）{
如果（$（窗口）.width（）>=800）{
$（'#recipeSlider'）.html（幻灯片图像）；
}否则{
$（'#recipeSlider'）.html（categoryImage）；
}
}
funLoadImage（）；
$（窗口）。调整大小（funLoadImage）；
});
})();

您的代码的问题是，在第一次加载页面时，它没有将图像分配给元素。
如果不调整大小，它们将永远不会添加到您的html中#recipeSlider div，因为您正在使用
$（窗口）。调整大小（函数（）{/code>

像这样的东西会初始化东西

var windowWidth = $(window).width();
if (windowWidth >= 800) {
  $('#recipeSlider').html(sliderImage);
} else if (windowWidth <= 800) {
  $('#recipeSlider').html(categoryImage);
}

var windowWidth=$（window.width（）；
如果（窗宽>=800）{
$（'#recipeSlider'）.html（幻灯片图像）；
}else if（windowWidth为resize创建一个单独的函数。然后在ready和resize事件上调用它

(function() {

    'use strict';

    // some code removed for clarity

   $(window).resize(function() {
       resizeImages();
   });


    $(window).ready(function() {
          resizeImages();
    });


 })();

function resizeImages () {
    if ($(this).width() >= 800) {
        $('#recipeSlider').html(sliderImage);
    } else if ($(this).width() <= 800) {
        $('#recipeSlider').html(categoryImage);
    }
}

（函数（）{
"严格使用",；
//为了清晰起见，删除了一些代码
$（窗口）。调整大小（函数（）{
调整图像大小（）；
});
$（窗口）.ready（函数（）{
调整图像大小（）；
});
})();
函数resizeImages（）{
如果（$（this）.width（）>=800）{
$（'#recipeSlider'）.html（幻灯片图像）；
}else if（$（this）.width（）这会同时删除调整大小部分，这不是期望的结果。当屏幕变得足够小时，他们需要不同的图像。@MattiPrice他没有加载图像，因为他根本没有加载图像。图像仅在调整大小事件触发时添加。不过，更新了答案。谢谢各位。尝试gschambial的代码…它会rks除了最初加载的第一个图像是较小的图像外。你知道我如何纠正吗？滑块图像是2000x500，类别图像（较小的一个）是800x500@Tom我已经更新了答案。请查看。您可以在第一个图像的
html
方法中添加一个承诺，并且只有在第一个图像加载完成后才会加载第二个图像。@gschambial我知道他为什么没有得到图像，我指出您的代码破坏了他想要的结果。这是可行的，但最初在l页上加载它拉较小的图像。一旦它的大小调整，它需要较大的图像image@Tom这可能与函数如何使用“this”有关。请尝试更改为
$（窗口）。宽度
，而不是
$（此）.width
Downvoted：这不包括在getJSON中调用
funLoadImage
时加载的页面/图像。它可能在服务器上不起作用。@Hal50000函数作用域在被调用时起作用。因此它也会在服务器上起作用。如果我们想从任何其他函数调用相同的
funLoadImage
，那么我们必须这是一个范围。
(function() {

    'use strict';

    // some code removed for clarity

   $(window).resize(function() {
       resizeImages();
   });


    $(window).ready(function() {
          resizeImages();
    });


 })();

function resizeImages () {
    if ($(this).width() >= 800) {
        $('#recipeSlider').html(sliderImage);
    } else if ($(this).width() <= 800) {
        $('#recipeSlider').html(categoryImage);
    }
}