জাভাস্ক্রিপ্ট / jQuery ব্যবহার করে কোনও চিত্র লোড হয়েছে কিনা তা আমি কীভাবে নির্ধারণ করতে পারি?

Question 1

আমি ব্যবহারকারীর ব্রাউজার উইন্ডোতে ফিট করার জন্য বৃহত চিত্রটির আকার পরিবর্তন করতে কিছু জাভাস্ক্রিপ্ট লিখছি। (দুর্ভাগ্যক্রমে আমি উত্স চিত্রগুলির আকার নিয়ন্ত্রণ করি না।)

এই জাতীয় কিছু HTML এ হবে:

<img id="photo"
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

srcকোনও imgট্যাগের চিত্রটি ডাউনলোড হয়েছে কিনা তা নির্ধারণ করার জন্য কি আমার জন্য কোনও উপায় আছে ?

আমার এটি দরকার কারণ $(document).ready()ব্রাউজারটি চিত্রটি লোড করার আগেই যদি কার্যকর করা হয় তবে আমি কোনও সমস্যায় পড়ছি। $("#photo").width()এবং $("#photo").height()স্থানধারকের আকার (Alt পাঠ্য) ফিরিয়ে দেবে। আমার ক্ষেত্রে এটি 134 x 20 এর মতো।

এই মুহুর্তে আমি কেবল ফটোটির উচ্চতা ১৫০ এরও কম কিনা তা পরীক্ষা করে নিচ্ছি এবং ধরে নিচ্ছি যে এটি যদি কেবলমাত্র ALL পাঠ্য হয়। তবে এটি বেশ হ্যাক এবং কোনও ছবি যদি ১৫০ পিক্সেলের চেয়ে কম লম্বা হয় (তবে এটি আমার বিশেষ ক্ষেত্রে সম্ভবত না), বা যদি Alt পাঠ্যটি ১৫০ পিক্সেলের বেশি লম্বা হয় (সম্ভবত একটি ছোট ব্রাউজার উইন্ডোতে ঘটতে পারে) ।

সম্পাদনা: যে কেউ কোডটি দেখতে চাইছেন তাদের জন্য:

$(function()
{
  var REAL_WIDTH = $("#photo").width();
  var REAL_HEIGHT = $("#photo").height();

  $(window).resize(adjust_photo_size);
  adjust_photo_size();

  function adjust_photo_size()
  {
    if(REAL_HEIGHT < 150)
    {
      REAL_WIDTH = $("#photo").width();
      REAL_HEIGHT = $("#photo").height();
      if(REAL_HEIGHT < 150)
      {
        //image not loaded.. try again in a quarter-second
        setTimeout(adjust_photo_size, 250);
        return;
      }
    }

    var new_width = . . . ;
    var new_height = . . . ;

    $("#photo").width(Math.round(new_width));
    $("#photo").height(Math.round(new_height));
  }

});

আপডেট : পরামর্শের জন্য ধন্যবাদ। যদি $("#photo").loadইভেন্টটির জন্য আমি কলব্যাক সেট করে নিই তবে ইভেন্টটি বরখাস্ত না হওয়ার ঝুঁকি রয়েছে , তাই আমি ইমেজ ট্যাগে সরাসরি একটি অনলাইন ইভেন্ট সংজ্ঞায়িত করেছি। রেকর্ডের জন্য, এখানে কোডটি দিয়ে আমি শেষ করেছি:

<img id="photo"
     onload="photoLoaded();"
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

তারপরে জাভাস্ক্রিপ্টে:

//This must be outside $() because it may get called first
var isPhotoLoaded = false;
function photoLoaded()
{
  isPhotoLoaded = true;
}

$(function()
{
  //Hides scrollbars, so we can resize properly.  Set with JS instead of
  //  CSS so that page doesn't break with JS disabled.
  $("body").css("overflow", "hidden");

  var REAL_WIDTH = -1;
  var REAL_HEIGHT = -1;

  $(window).resize(adjust_photo_size);
  adjust_photo_size();

  function adjust_photo_size()
  {
    if(!isPhotoLoaded)
    {
      //image not loaded.. try again in a quarter-second
      setTimeout(adjust_photo_size, 250);
      return;
    }
    else if(REAL_WIDTH < 0)
    {
      //first time in this function since photo loaded
      REAL_WIDTH = $("#photo").width();
      REAL_HEIGHT = $("#photo").height();
    }

    var new_width = . . . ;
    var new_height = . . . ;

    $("#photo").width(Math.round(new_width));
    $("#photo").height(Math.round(new_height));
  }

});

Question 2

হয় কোনও ইভেন্ট শ্রোতা যুক্ত করুন, অথবা চিত্রটি নিজেরাই লোড দিয়ে ঘোষণা করুন। তারপরে সেখান থেকে মাত্রাগুলি বের করুন।

<img id="photo"
     onload='loaded(this.id)'
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

Question 3

Jquery ডেটা স্টোর ব্যবহার করে আপনি একটি 'বোঝাই' রাষ্ট্রের সংজ্ঞা দিতে পারেন।

<img id="myimage" onload="$(this).data('loaded', 'loaded');" src="lolcats.jpg" />

তারপরে অন্য কোথাও আপনি এটি করতে পারেন:

if ($('#myimage').data('loaded')) {
    // loaded, so do stuff
}

Question 4

সঠিক উত্তরটি হ'ল ইভেন্ট.স্পেশাল.লোডটি ব্যবহার করা

এটা সম্ভব যে চিত্রটি ব্রাউজারের ক্যাশে থেকে লোড করা হলে লোড ইভেন্টটি ট্রিগার করা হবে না। এই সম্ভাবনার জন্য অ্যাকাউন্টে, আমরা একটি বিশেষ লোড ইভেন্ট ব্যবহার করতে পারি যা চিত্রটি প্রস্তুত থাকলে অবিলম্বে আগুন লাগবে fire ইভেন্ট.স্পেশাল.লোড বর্তমানে প্লাগইন হিসাবে উপলব্ধ।

.লোড () এ দস্তাবেজগুলি প্রতি

Question 5

আপনি আল্লায়েন যা বলেছেন তা আপনি করতে চান তবে সচেতন থাকবেন যে কখনও কখনও ছবিটি ডোম প্রস্তুত হওয়ার আগে লোড হয়ে যায়, যার অর্থ আপনার লোড হ্যান্ডলারটি আগুন লাগবে না। সেরা উপায় হ'ল আল্লায়েন যা বলছেন তেমনই করা, তবে লোড হ্যান্ডার সংযুক্ত করার পরে জাভাস্ক্রিপ্ট সহ চিত্রের এসআরসি সেট করুন। এইভাবে আপনি গ্যারান্টি দিতে পারেন যে এটি আগুন ধরেছে।

অ্যাক্সেসযোগ্যতার ক্ষেত্রে, আপনার সাইটটি এখনও জাভাস্ক্রিপ্টবিহীন লোকদের জন্য কাজ করবে? আপনি ইমগ ট্যাগটি সঠিক এসসিআর দিতে পারেন, আপনার জেএস চালানোর জন্য আপনাকে ডোম রেডি হ্যান্ডলার সংযুক্ত করতে পারেন: চিত্রের এসআরসি সাফ করুন (পৃষ্ঠার ঝাঁকুনি প্রতিরোধের জন্য এটি সিএসএস সহ একটি স্থির করুন এবং উচ্চতা দিন), তারপরে আপনার আইএমজি লোড হ্যান্ডলারটি সেট করুন, তারপরে src টি সঠিক ফাইলে পুনরায় সেট করুন। আপনি সমস্ত ঘাঁটি এইভাবে আবরণ করুন :)

Question 6

আপনার মূল প্রশ্নের সাম্প্রতিক মন্তব্যগুলির একটি হিসাবে

$(function() {

  $(window).resize(adjust_photo_size);
  adjust_photo_size();

  function adjust_photo_size()  {
    if (!$("#photo").get(0).complete) {
       $("#photo").load(function() {
          adjust_photo_size();
       });
    } else {
      ... 
    }
});

সতর্কতা এই উত্তরটি ie8 এবং নিম্নে একটি গুরুতর লুপের কারণ হতে পারে, কারণ img.complete সর্বদা ব্রাউজার দ্বারা যথাযথভাবে সেট করা থাকে না। আপনি যদি ie8 সমর্থন করতে চান, ইমেজ বোঝা হয়েছে মনে করার জন্য একটি পতাকা ব্যবহার করুন।

Question 7

এর মতো কিছু চেষ্টা করুন:

$("#photo").load(function() {
    alert("Hello from Image");
});

Question 8

"ইমেজসোলেড" নামে একটি jQuery প্লাগইন রয়েছে যা কোনও উপাদানটির চিত্র (গুলি) লোড হয়েছে কিনা তা পরীক্ষা করতে ক্রস-ব্রাউজারের সামঞ্জস্যপূর্ণ পদ্ধতি সরবরাহ করে।

সাইট: https://github.com/desandro/imagesloaded/

ভিতরে থাকা অনেকগুলি চিত্র রয়েছে এমন ধারকটির ব্যবহার:

$('container').imagesLoaded(function(){
 console.log("I loaded!");
})

প্লাগইন দুর্দান্ত:

ভিতরে অনেক চিত্র সহ একটি ধারক পরীক্ষা করার জন্য কাজ করে
এটি কোনও লোড হয়েছে কিনা তা দেখার জন্য একটি আইএমজি যাচাইয়ের জন্য কাজ করে

Question 9

এই সম্পর্কে কোন মন্তব্য?

...

doShow = function(){
  if($('#img_id').attr('complete')){
    alert('Image is loaded!');
  } else {
    window.setTimeout('doShow()',100);
  }
};

$('#img_id').attr('src','image.jpg');

doShow();

...

সর্বত্র কাজের মতো মনে হচ্ছে ...

Question 10

আমি সবেমাত্র jQuerys ডিফার্ড অবজেক্ট ব্যবহার করে একটি চিত্র লোড করতে একটি jQuery ফাংশন তৈরি করেছি যা লোড / ত্রুটি ইভেন্টের উপর প্রতিক্রিয়া দেখাতে খুব সহজ করে তোলে:

$.fn.extend({
    loadImg: function(url, timeout) {
        // init deferred object
        var defer = $.Deferred(),
            $img = this,
            img = $img.get(0),
            timer = null;

        // define load and error events BEFORE setting the src
        // otherwise IE might fire the event before listening to it
        $img.load(function(e) {
            var that = this;
            // defer this check in order to let IE catch the right image size
            window.setTimeout(function() {
                // make sure the width and height are > 0
                ((that.width > 0 && that.height > 0) ? 
                    defer.resolveWith : 
                    defer.rejectWith)($img);
            }, 1);
        }).error(function(e) {
            defer.rejectWith($img);
        });

        // start loading the image
        img.src = url;

        // check if it's already in the cache
        if (img.complete) {
            defer.resolveWith($img);
        } else if (0 !== timeout) {
            // add a timeout, by default 15 seconds
            timer = window.setTimeout(function() {
                defer.rejectWith($img);
            }, timeout || 15000);
        }

        // return the promise of the deferred object
        return defer.promise().always(function() {
            // stop the timeout timer
            window.clearTimeout(timer);
            timer = null;
            // unbind the load and error event
            this.off("load error");
        });
    }
});

ব্যবহার:

var image = $('<img />').loadImg('http://www.google.com/intl/en_com/images/srpr/logo3w.png')
.done(function() {
    alert('image loaded');
    $('body').append(this);
}).fail(function(){
    alert('image failed');
});

এটি এখানে কাজ করে দেখুন: http://jsfiddle.net/roberkules/AdWZj/

Question 11

এই চিত্রটি পরিমাপযোগ্য মাত্রাগুলির ভিত্তিতে কোনও চিত্র লোড করা হয়েছে কিনা তা পরীক্ষা করে cks ইতিমধ্যে কিছু চিত্র লোড হওয়ার পরে যদি আপনার স্ক্রিপ্টটি কার্যকর করা হয় তবে এই কৌশলটি কার্যকর।

imageLoaded = function(node) {
    var w = 'undefined' != typeof node.clientWidth ? node.clientWidth : node.offsetWidth;
    var h = 'undefined' != typeof node.clientHeight ? node.clientHeight : node.offsetHeight;
    return w+h > 0 ? true : false;
};

Question 12

আমি এটি আমার জন্য কাজ পেয়েছি

document.querySelector("img").addEventListener("load", function() { alert('onload!'); });

ক্রেডিট মোটামুটি ফ্র্যাঙ্ক শ্যুইটারম্যানের কাছে যায়, যিনি স্বীকৃত উত্তরে মন্তব্য করেছিলেন। আমি এখানে এটি রাখা ছিল, এটি খুব মূল্যবান ...

Question 13

আমরা এমন একটি পৃষ্ঠা তৈরি করেছি যেখানে এটি বেশ কয়েকটি চিত্র লোড করে এবং তারপরে চিত্রটি লোড হওয়ার পরেই অন্যান্য কার্য সম্পাদন করে। এটি একটি ব্যস্ত সাইট যা প্রচুর ট্র্যাফিক তৈরি করেছিল। দেখে মনে হচ্ছে নিম্নলিখিত সাধারণ স্ক্রিপ্টটি ব্যবহারিকভাবে সমস্ত ব্রাউজারগুলিতে কাজ করেছে:

$(elem).onload = function() {
    doSomething();
}

তবে এটি IE9 এর একটি সম্ভাব্য বিষয়!

আমরা কেবলমাত্র ব্রাউজারের বিষয়েই প্রতিবেদন করেছি আইই 9 IE আমরা কি অবাক হই না? দেখে মনে হচ্ছে যে সমস্যাটি সমাধানের সর্বোত্তম উপায় হ'ল অনলোড লোড ফাংশনটি সংজ্ঞায়িত না করা অবধি চিত্রের জন্য কোনও এসআরসি বরাদ্দ করা নয়, যেমন:

$(elem).onload = function() {
    doSomething();
}
$(elem).attr('src','theimage.png');

দেখে মনে হচ্ছে যে আইই 9 কখনও কখনও ফেলে দেবে না onload কোনও কারণে ইভেন্টটি । এই পৃষ্ঠায় অন্যান্য সমাধান (যেমন ইভান ক্যারোলের একটি উদাহরণস্বরূপ) এখনও কার্যকর হয়নি। যৌক্তিকভাবে, এটি লোডের অবস্থাটি ইতিমধ্যে সফল হয়েছিল এবং ফাংশনটি ট্রিগার করেছে কিনা তা যাচাই করেছে এবং যদি তা না হয়ে থাকে তবে অনলোডলোড হ্যান্ডলারটি সেট করুন, তবে আপনি যখন তা পরীক্ষা করে দেখিয়েছিলেন যে জেএসের এই দুটি লাইনের মধ্যে চিত্রটি লোড হতে পারে testing প্রথম লাইনে লোড না হওয়া উপস্থিত এবং অনলোড হ্যান্ডলারটি সেট হওয়ার আগে লোড হচ্ছে।

আমরা দেখতে পেয়েছি যে আপনি যা চান তা পাওয়ার সর্বোত্তম উপায় হ'ল onloadইভেন্টের ট্রিগার সেট না করা অবধি চিত্রের এসআরসি-কে সংজ্ঞায়িত না করা ।

আমরা কেবলমাত্র IE8 সমর্থন করা বন্ধ করে দিয়েছি তাই আমি IE9 এর পূর্বে সংস্করণগুলির জন্য কথা বলতে পারি না, অন্যথায়, সাইটে ব্যবহৃত সমস্ত অন্যান্য ব্রাউজারের মধ্যে - আইই 10 এবং 11 পাশাপাশি ফায়ারফক্স, ক্রোম, অপেরা, সাফারি এবং যা কিছু লোকেরা মোবাইল ব্রাউজার ব্যবহার করছিল - হ্যান্ডলারটি srcনির্ধারণের আগে সেটিংস সেট onloadকরা এমনকি কোনও সমস্যা ছিল না।

Question 14

আমি কি পুরোপুরি একটি খাঁটি সিএসএস সমাধান প্রস্তাব দিতে পারি?

কেবলমাত্র একটি ডিভ করুন যা আপনি চিত্রটি দেখতে চান the চিত্রটিকে ব্যাকগ্রাউন্ড হিসাবে সেট করুন। তারপরে সম্পত্তি background-size: coverবা background-size: containআপনি এটি কীভাবে চান তার উপর নির্ভর করে।

coverছোট দিকের বাক্সটি কভার না করা পর্যন্ত চিত্রটি ক্রপ করবে। containপুরো ইমেজটি ডিভের ভিতরে রাখবে, আপনাকে পাশের জায়গাগুলি রেখে দেবে।

নীচে স্নিপেট পরীক্ষা করুন।

div {
  height: 300px;
  width: 300px;
  border: 3px dashed grey;
  background-position: center;
  background-repeat: no-repeat;
}

.cover-image {
  background-size: cover;
}

.contain-image {
  background-size: contain;
}

<div class="cover-image" style="background-image:url(https://assets1.ignimgs.com/2019/04/25/avengers-endgame-1280y-1556226255823_1280w.jpg)">
</div>
<br/>
<div class="contain-image" style="background-image:url(https://assets1.ignimgs.com/2019/04/25/avengers-endgame-1280y-1556226255823_1280w.jpg)">
</div>

স্নিপেট প্রসারিত করুন

Question 15

আমি দেখতে পাই যে এই সহজ সমাধানটি আমার পক্ষে সবচেয়ে ভাল কাজ করে:

        function setEqualHeight(a, b) {
            if (!$(a).height()) {
                return window.setTimeout(function(){ setEqualHeight(a, b); }, 1000);
            }
            $(b).height($(a).height());
        }

        $(document).ready(function() {
            setEqualHeight('#image', '#description');
            $(window).resize(function(){setEqualHeight('#image', '#description')});
        });
    </script>