javascript - 尝试让两张图片根据页面宽度调整大小

Question

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

(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 + '">';
	     });
		
		 $(window).resize(function() {
			
			if ($(this).width() >= 800) {
    			$('#recipeSlider').html(sliderImage);
		 	} else if ($(this).width() <= 800) {
    			$('#recipeSlider').html(categoryImage);
			}
  		 });
		 
	  });
 })();

 <div id="recipeSlider"></div>

Answer 1

这是你的答案。

 (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);

  });
  })();

您的代码的问题是，当第一次加载页面时，它没有将图像分配给元素。