image.onload ইভেন্ট এবং ব্রাউজার ক্যাশে

113

কোনও চিত্র লোড হওয়ার পরে আমি একটি সতর্কতা বাক্স তৈরি করতে চাই, তবে চিত্রটি ব্রাউজারের ক্যাশে সংরক্ষণ করা হলে, .onloadইভেন্টটি চালানো হবে না।

চিত্রটি ক্যাশে করা হয়েছে কিনা তা বিবেচনা না করেই কোনও চিত্র লোড হয়ে গেলে আমি কীভাবে একটি সতর্কতা ট্রিগার করব?

var img = new Image();
img.src = "img.jpg";
img.onload = function () {
   alert("image is loaded");
}

javascript image-loading

— ওতো শ্যাভাদজে
সূত্র

6

চিত্র লোডে jQuery কলব্যাকের

— ফেব্রেসিও মাটি

153

আপনি গতিশীলভাবে চিত্রটি তৈরি করার সময়, onloadসম্পত্তিটির আগে সেট করুন src।

var img = new Image();
img.onload = function () {
   alert("image is loaded");
}
img.src = "img.jpg";

ফিডল - সর্বশেষ ফায়ারফক্স এবং ক্রোম প্রকাশে পরীক্ষিত।

আপনি এই পোস্টে উত্তরটিও ব্যবহার করতে পারেন , যা আমি একক গতিশীল উত্পন্ন চিত্রের জন্য গ্রহণ করেছি:

var img = new Image();
// 'load' event
$(img).on('load', function() {
  alert("image is loaded");
});
img.src = "img.jpg";

বেহালা

— ফ্যাব্রেসিও ম্যাট
সূত্র

অপেক্ষা করুন। আপনার দ্বিতীয় কোড উদাহরণটি কেন ভুল কাজ করে এবং .src.নলোড সেট করার আগে সেট করে? প্রথম কোড উদাহরণে আপনার এটি ঠিক ছিল, তবে দ্বিতীয়টিটি গোলমেলে ফেলেছে। দ্বিতীয়টি আইই এর কয়েকটি সংস্করণে সঠিকভাবে কাজ করবে না।

— jفر00

1

@ jender00 নাহ, কোনও গণ্ডগোল নয়। ব্যাক আপ কোড (২ য় এক) হ'ল প্রথম ক্ষেত্রে যদি কোনওভাবে কাজ বন্ধ করে দেয় সে ক্ষেত্রে এটি ঠিক। ইমেজটি ইতিমধ্যে ক্যাশেড থাকা অবস্থায় =]এটি একটি .completeচেক ব্যবহার করে , তাই কোডটি এটি প্রদর্শিত হচ্ছে। অবশ্যই, সর্বোত্তম অনুশীলনের জন্য, আপনি সর্বদা srcসমস্ত হ্যান্ডলারদের বাধ্যতার পরে সেট করতে পারেন ।

— ফ্যাব্রেসিও মাটি

4

.completeএই ক্ষেত্রে নির্ভর করার কোন কারণ নেই । সেট করার আগে প্রথমে আপনার লোড হ্যান্ডলারটি সেট করুন .srcএবং এটি প্রয়োজন হয় না। আমি একটি স্লাইডশো লিখেছি যা প্রতিটি কল্পনাযোগ্য ব্রাউজারে হাজার হাজার সাইট ব্যবহার করে এবং প্রথম কৌশলটি প্রতিবার কাজ করে। এই জাতীয় .completeস্ক্র্যাচ থেকে নতুন চিত্র তৈরি করার সময় কখনও চেক করার দরকার নেই ।

— jفر00

ঠিক আছে, মাথা আপ জন্য ধন্যবাদ, আপনার যুক্তি প্রতিফলিত উত্তর আপডেট =]। এছাড়াও @ jfriend00 আপনি কি আই-তে ছবিটি লোড করে কিনা তা পরীক্ষা করতে পারেন? ভাবছেন যদি এটি আমার নেটওয়ার্ক বা আইই এবং ইমেজের কোনও সমস্যা।

— ফ্যাব্রেসিও মাট্টি

9

এছাড়াও আজ আমি দেখতে পেয়েছি যে ওয়েবকিটটি img.src = ''নতুন এসসিআর বরাদ্দ করার আগে এটি আগে ব্যবহৃত হয়।

— কোউজ

10

যদি এসআরসিটি ইতিমধ্যে সেট করা থাকে তবে ইভেন্টটি হ্যান্ডলারকে সীমাবদ্ধ করার আগে ক্যাশেড ইভেন্টে ইভেন্টটি ফায়ার করছে। সুতরাং, আপনার ইভেন্টটি বেস ভিত্তিতেও ট্রিগার করা উচিত .complete।

কোড নমুনা:

$("img").one("load", function() {
   //do stuff
}).each(function() {
   if(this.complete || /*for IE 10-*/ $(this).height() > 0)
     $(this).load();
});

— টম সার্ডু
সূত্র

6

এই ধরণের পরিস্থিতির জন্য দুটি সম্ভাব্য সমাধান রয়েছে:

এই পোস্টে প্রস্তাবিত সমাধান ব্যবহার করুন
srcব্রাউজারটিকে আবার ডাউনলোড করতে বাধ্য করার জন্য চিত্রটিতে একটি অনন্য প্রত্যয় যুক্ত করুন :
```
var img = new Image();
img.src = "img.jpg?_="+(new Date().getTime());
img.onload = function () {
    alert("image is loaded");
}
```

এই কোডটিতে প্রতিবার ইমেজ ইউআরএলটির শেষে বর্তমান টাইমস্ট্যাম্প যুক্ত করে আপনি একে অনন্য করেছেন এবং ব্রাউজারটি আবার চিত্রটি ডাউনলোড করবে

— haynar
সূত্র

44

এই সমস্ত কি পরাজয় ক্যাচিং। এই সমস্যাটি সমাধান করার জন্য এটিই ভুল উপায়। সঠিক উপায় Fabricio এর উত্তর আছে। মান সেট করার .onloadআগে হ্যান্ডলারটি সেট করুন .srcএবং আপনি IE এর কয়েকটি সংস্করণে ওলোডলোড ইভেন্টটি মিস করবেন না।

— jفر00

1

হ্যাঁ আপনি ঠিক বলেছেন, তবে ক্যাশে করা সবসময়ই কাম্য নয়, কখনও কখনও চিত্রগুলি ক্যাশে করা উচিত নয়। অবশ্যই এই বিশেষ পরিস্থিতিতে এটি প্রয়োজনের উপর নির্ভর করে

— হাইনার

1

আমার কৌণিক অ্যাপ্লিকেশনটিতে আমি অন্যান্য উত্তরগুলি যা বলেছি সেগুলি চেষ্টা করেছিলাম, কিন্তু সহায়তা করি নি। তবে এই উত্তরের মতো ক্যাশে না জোর করা আমার পক্ষে কাজ করেছে। সুতরাং আমার কাছ থেকে এক।

— থানু

একমাত্র সমাধান যা সর্বশেষতম সংস্করণ ক্রোমে আমার জন্য কাজ করেছে।

— তরুণ বব

3

আমি আজ একই ইস্যু পূরণ করেছি। বিভিন্ন পদ্ধতি চেষ্টা করার পরে, আমি বুঝতে পারি যে কেবল আকারের কোডটি ভিতরে রাখার $(window).load(function() {})পরিবর্তে document.readyসমস্যার অংশটি সমাধান করবে (যদি আপনি পৃষ্ঠাটি অজেক্সিং না করে থাকেন)।

— user9319
সূত্র

এটি ব্রাউজারের ইমেজ ক্যাশে হওয়া পরিস্থিতিটির জন্য একটি ভাল উত্তর, উইন্ডো লোডের সাথে ঠিক কাজ করে

— শোকার

ঠিক আমি যে সমস্যার মুখোমুখি ছিলাম। পরিবর্তন $(document).readyকরার জন্য $(window).loadআমার সমস্যার সমাধান।

— তরিকুল ইসলাম

0

আমি খুঁজে পেয়েছি যে আপনি কেবল Chrome এ এটি করতে পারেন:

  $('.onload-fadein').each(function (k, v) {
    v.onload = function () {
        $(this).animate({opacity: 1}, 2000);
    };
    v.src = v.src;
});

.Srcটিকে নিজের মধ্যে সেট করা অনলোড লোড ইভেন্টটিকে ট্রিগার করবে।

— নোহ এলম্যান
সূত্র