मैं ऐसा कुछ कर रहा हूं:
maxDim = 100;
$("div.images").html("<img class="pull" src="/images/"+imgs[img_i]+"" />");
$("img.pull").each(function(i){
if( $(this).height() > $(this).width() ){
var h = maxDim;
var w = Math.ceil( $(this).width() / $(this).height() * maxDim);
}
else{
var w = maxDim;
var h = Math.ceil( $(this).height() / $(this).width() * maxDim);
}
$(this).css({height:h, width:w});
});
अब मुझे पूरा यकीन है कि छवि का आकार बदलना ठीक है ... esp क्योंकि यह इस उत्तर से मेल खाता है http://adeelejaz.com/blog/resize-images-on-fly-using-jquery/
समस्या यह है कि कभी-कभी यह काम करता है, कभी-कभी यहनहीं करता है। (यह कभी-कभी मूल संकल्प को दिखाएगा और दूसरों पर आकार बदल जाएगा) ऐसा लगता है कि समय वास्तविक समस्या है। शायद आकार बदलने से पहले छवि को डीओएम में फिर से चुनने के लिए कहा जाता है? कोई भी सलाह है कि आप लोगों की बहुत सराहना की जाएगी।
उत्तर:
जवाब के लिए 2 № 1मुझे लगता है कि छवियों को कभी-कभी लोड नहीं किया जाता है। उस स्थिति में मूल आकार अभी भी अज्ञात है (0) और गणना शून्य से विभाजन के कारण NaN-values पर जाती है।
आकार बदलना जब छवियों की आग की लोड घटना एक विकल्प होना चाहिए।
जवाब के लिए 2 № 2
आपको इसकी आवश्यकता होगी विशेष छवि लोड घटना प्लग-इन। अन्यथा, यदि छवि पहले से ही ब्राउज़र के कैश में है तो ईवेंट आग नहीं लगेगा। फिर आप यह कर सकते हैं:
$("img.pull").load(function(i){
// ...
});