尝试根据页面宽度设置两个图像的大小

I have two images that I am pulling from a JSON file. Both images scale down accordingly depending on the screen width when the browser is resized, but on page load the initial image doesn't show until the page is resized. Hope someone can help below is my code:

我有两个从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>

5 个解决方案

#1

Here is your answer.

这是你的答案。

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

  });
  })();

The problem with your code was it's not assigning image to element when page is loaded for first time.

您的代码的问题是，在首次加载页面时，它没有为元素分配图像。

#2

You aren't injecting an image until you resize it. So on page load no image is displayed. You can either add a default image inside your "recipeSlider" div, or you can add a function called on page load that adds the image.

在调整图像大小之前，不需要注入图像。所以在页面加载中没有显示图像。您可以在“recipeSlider”div中添加一个默认图像，或者您可以添加一个在页面加载中调用的函数来添加图像。

You should refactor your code so that the portion that chooses the image is in it's own function. Call that function on page load and page resize and you should have the result you want.

您应该重构代码，使选择映像的部分位于它自己的函数中。调用页面加载和页面大小上的函数，您应该得到您想要的结果。

#3

Without resizing they never get added to the html of you #recipeSlider div because you are using $(window).resize(function() {

如果不调整大小，它们就不会被添加到#recipeSlider div的html中，因为您正在使用$(窗口).resize(函数){

Something like this would initialize things.

像这样的东西会初始化一些东西。

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

However I would recommend merging this and your resize function into another function that you can use initially and on resize

但是，我建议将这个和您的调整大小函数合并到另一个函数中，您可以在开始和调整大小的时候使用它。

#4

Create a separate function for the resize. Then call it on both ready and resize events.

为调整大小创建一个单独的函数。然后在就绪和调整大小的事件上调用它。

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

#5

Because you are adding image only on window.resize:

因为你只在窗口上添加图像。调整大小:

Do like this:

这样做:

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

});

         });


         $(window).resize(function() {

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

      });
 })();

#1