嘗試獲取兩個圖像根據頁面寬度調整

我有兩個圖像，我從JSON文件中提取。根據瀏覽器調整大小時的屏幕寬度，這兩個圖像都相應縮小，但在頁面加載時，初始圖像不顯示，直到頁面調整大小。希望有人能幫助下面是我的代碼：嘗試獲取兩個圖像根據頁面寬度調整

(function() { 
 
\t 
 
\t 'use strict'; 
 

 
    \t var url = 'path to json'; 
 
    
 
    $.getJSON(url, function(json) { 
 
\t  
 
\t \t var sliderImage = ''; 
 
\t \t var categoryImage = ''; 
 
\t \t 
 
\t \t $.each(json[0], function (i, item) { 
 
\t \t \t sliderImage += '<img src="' + item.imageSliderURL + '">'; 
 
\t \t \t categoryImage += '<img src="' + item.imageCategoryURL + '">'; 
 
\t  }); 
 
\t \t 
 
\t \t $(window).resize(function() { 
 
\t \t \t 
 
\t \t \t if ($(this).width() >= 800) { 
 
    \t \t \t $('#recipeSlider').html(sliderImage); 
 
\t \t \t } else if ($(this).width() <= 800) { 
 
    \t \t \t $('#recipeSlider').html(categoryImage); 
 
\t \t \t } 
 
    \t \t }); 
 
\t \t 
 
\t }); 
 
})();

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

來源

2016-10-19 Tom

這是你的答案。

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

    }); 
    })();

您的代碼存在的問題是，當頁面首次加載時，它不會將圖像分配給元素。

來源

2016-10-19 17:58:35

這個工程，但最初在頁面加載其拉小圖像。一旦它調整大小，它需要更大的圖像 – Tom

@Tom這可能與函數如何使用「this」有關。嘗試改變''（窗口）。寬度'而不是'$（this）.width' –

那工作！謝謝@M – Tom

因爲你要添加圖像僅在window.resize：

這樣做：

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

     }); 
})();

來源

2016-10-19 17:56:54 gschambial

這會將調整大小部分一起移除而不是所需的結果。當屏幕變得足夠小時，他們需要不同的圖像。 –

@MattiPrice他在加載時沒有獲取圖像，因爲他沒有在加載時添加它們。僅在調整大小事件觸發器上添加圖像。雖然更新了答案。 – gschambial

謝謝你們。嘗試gschambial的代碼...它的作品除了第一個圖像，最初加載的是較小的圖像。任何想法如何我可以糾正？滑塊圖像是2000x500和類別圖像（較小的一個）是800x500 – Tom

在調整大小之前，您沒有注入圖像。所以在頁面加載時不顯示圖像。您可以在「recipeSlider」div中添加默認圖像，也可以添加頁面加載時調用的添加圖像的函數。

您應該重構代碼，以便選擇圖像的部分位於其自己的函數中。在頁面加載和頁面調整時調用該函數，並且您應該獲得所需的結果。

來源

2016-10-19 17:57:03

不調整，因爲你正在使用這樣$(window).resize(function() {

東西會初始化的事情，他們從來沒有被添加到您#recipeSlider DIV的HTML。

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

不過，我會建議合併這和你的大小調整功能到您最初可以使用和調整

來源

2016-10-19 18:03:22 DevFX

創建調整大小的單獨功能的其他功能。然後在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); 
    } 
}

來源

2016-10-19 18:07:59 Hal50000

嘗試獲取兩個圖像根據頁面寬度調整

回答

相關問題