আমি জানতে চাই কখন কোন চিত্র লোড করা শেষ হয়েছে। কলব্যাক দিয়ে এটি করার কোনও উপায় আছে কি?
যদি তা না হয় তবে আদৌ কী করার উপায় আছে?
উত্তর:
.complete + কলব্যাক
এটি অতিরিক্ত নির্ভরতা ছাড়াই মানদণ্ডের সম্মতিজনক পদ্ধতি এবং প্রয়োজনের চেয়ে আর অপেক্ষা করে না:
var img = document.querySelector('img')
function loaded() {
alert('loaded')
}
if (img.complete) {
loaded()
} else {
img.addEventListener('load', loaded)
img.addEventListener('error', function() {
alert('error')
})
}img.completeকল এবং কলটির মধ্যে সম্পূর্ণ হলে এটি কী ভুল হতে পারে addEventListener?
loadইভেন্ট শ্রোতাদের অবশ্যই একটি elseধারা থাকতে হবে , ঘটনাটি চালুর img.completeআগে যেমন সত্য হয়ে উঠতে পারে load, তাই এটি না হলে আপনি loadedসম্ভবত দু'বার কল করতে পারতেন না (মনে রাখবেন এটি অপেক্ষাকৃত পরিবর্তিত হওয়ার সম্ভাবনা রয়েছে যা img.completeকেবলমাত্র ইভেন্টে সত্য হয়ে ওঠে দাবানল)।
চিত্র.অনলোড () প্রায়শই কাজ করবে।
এটি ব্যবহার করতে, আপনার src বৈশিষ্ট্যটি সেট করার আগে আপনাকে ইভেন্ট হ্যান্ডলারের সাথে আবদ্ধ হওয়া নিশ্চিত হতে হবে।
সম্পর্কিত লিংক:
ব্যবহারের উদাহরণ:
window.onload = function () {
var logo = document.getElementById('sologo');
logo.onload = function () {
alert ("The image has loaded!");
};
setTimeout(function(){
logo.src = 'https://edmullen.net/test/rc.jpg';
}, 5000);
}; <html>
<head>
<title>Image onload()</title>
</head>
<body>
<img src="#" alt="This image is going to load" id="sologo"/>
<script type="text/javascript">
</script>
</body>
</html>loadইভেন্টটি বৈধ নয়? html.spec.whatwg.org/m মাল্টিপেজ / ওয়েবেপাপিস এইচটিএমএল#onload হ্যান্ডলার- আনলোড ইভেন্ট হ্যান্ডলারের সংজ্ঞা ।
আপনি জাভাস্ক্রিপ্ট চিত্র শ্রেণীর। কমপ্লিট সম্পত্তি ব্যবহার করতে পারেন।
আমার একটি অ্যাপ্লিকেশন রয়েছে যেখানে আমি বেশ কয়েকটি চিত্র অবজেক্টগুলিকে একটি অ্যারেতে সঞ্চয় করি যা স্ক্রিনে গতিশীলভাবে যুক্ত হবে এবং সেগুলি লোড হওয়ার সাথে সাথে আমি পৃষ্ঠায় অন্য একটি ডিভিতে আপডেট লিখি। এখানে একটি কোড স্নিপেট রয়েছে:
var gAllImages = [];
function makeThumbDivs(thumbnailsBegin, thumbnailsEnd)
{
gAllImages = [];
for (var i = thumbnailsBegin; i < thumbnailsEnd; i++)
{
var theImage = new Image();
theImage.src = "thumbs/" + getFilename(globals.gAllPageGUIDs[i]);
gAllImages.push(theImage);
setTimeout('checkForAllImagesLoaded()', 5);
window.status="Creating thumbnail "+(i+1)+" of " + thumbnailsEnd;
// make a new div containing that image
makeASingleThumbDiv(globals.gAllPageGUIDs[i]);
}
}
function checkForAllImagesLoaded()
{
for (var i = 0; i < gAllImages.length; i++) {
if (!gAllImages[i].complete) {
var percentage = i * 100.0 / (gAllImages.length);
percentage = percentage.toFixed(0).toString() + ' %';
userMessagesController.setMessage("loading... " + percentage);
setTimeout('checkForAllImagesLoaded()', 20);
return;
}
}
userMessagesController.setMessage(globals.defaultTitle);
}আপনি jQuery এ লোড () - ইভেন্টটি ব্যবহার করতে পারেন তবে ব্রাউজারের ক্যাশে থেকে চিত্রটি লোড করা থাকলে এটি সর্বদা আগুন ধরিয়ে দেয় না। এই প্লাগইনটি https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js এই সমস্যার প্রতিকার করতে ব্যবহার করা যেতে পারে।
জীবন jquery জন্য খুব ছোট।
function waitForImageToLoad(imageElement){
return new Promise(resolve=>{imageElement.onload = resolve})
}
var myImage = document.getElementById('myImage');
var newImageSrc = "https://pmchollywoodlife.files.wordpress.com/2011/12/justin-bieber-bio-photo1.jpg?w=620"
myImage.src = newImageSrc;
waitForImageToLoad(myImage).then(()=>{
// Image have loaded.
console.log('Loaded lol')
});<img id="myImage" src="">srcজেএস যুক্ত করে বিভ্রান্ত দেখাচ্ছেন ।
myImage.src = https://pmchollywoodlife.files.wordpress.com/2011/12/justin-bieber-bio-photo1.jpg?w=620কৌতুক করে
এখানে jQuery সমতুল্য:
var $img = $('img');
if ($img.length > 0 && !$img.get(0).complete) {
$img.on('load', triggerAction);
}
function triggerAction() {
alert('img has been loaded');
}যখন প্রশ্ন জিজ্ঞাসা করা হয়েছিল তখন ২০০৮-এর জন্য উপযুক্ত নয়, তবে এই দিনগুলি আমার পক্ষে ভালভাবে কাজ করে:
async function newImageSrc(src) {
// Get a reference to the image in whatever way suits.
let image = document.getElementById('image-id');
// Update the source.
img.src = src;
// Wait for it to load.
await new Promise((resolve) => { image.onload = resolve; });
// Done!
console.log('image loaded! do something...');
}এই ফাংশনগুলি সমস্যার সমাধান করবে, আপনাকে DrawThumbnailsফাংশনটি বাস্তবায়ন করতে হবে এবং চিত্রগুলি সংরক্ষণ করার জন্য একটি বৈশ্বিক পরিবর্তনশীল থাকতে হবে। আমি এটি একটি ক্লাস অবজেক্টের সাথে কাজ করতে পেতে পছন্দ করিThumbnailImageArray সদস্য ভেরিয়েবল হিসাবে , তবে লড়াই করছি!
হিসাবে বলা হয় addThumbnailImages(10);
var ThumbnailImageArray = [];
function addThumbnailImages(MaxNumberOfImages)
{
var imgs = [];
for (var i=1; i<MaxNumberOfImages; i++)
{
imgs.push(i+".jpeg");
}
preloadimages(imgs).done(function (images){
var c=0;
for(var i=0; i<images.length; i++)
{
if(images[i].width >0)
{
if(c != i)
images[c] = images[i];
c++;
}
}
images.length = c;
DrawThumbnails();
});
}
function preloadimages(arr)
{
var loadedimages=0
var postaction=function(){}
var arr=(typeof arr!="object")? [arr] : arr
function imageloadpost()
{
loadedimages++;
if (loadedimages==arr.length)
{
postaction(ThumbnailImageArray); //call postaction and pass in newimages array as parameter
}
};
for (var i=0; i<arr.length; i++)
{
ThumbnailImageArray[i]=new Image();
ThumbnailImageArray[i].src=arr[i];
ThumbnailImageArray[i].onload=function(){ imageloadpost();};
ThumbnailImageArray[i].onerror=function(){ imageloadpost();};
}
//return blank object with done() method
//remember user defined callback functions to be called when images load
return { done:function(f){ postaction=f || postaction } };
}addThumbnailImagesফাংশন সহ এই কোডটির বেশিরভাগটি অপ্রাসঙ্গিক । এটিকে প্রাসঙ্গিক কোডে ফেলে দিন এবং আমি -1 মুছে ফেলব।
ব্রাউজারের চিত্রটি রেন্ডার করার পরে যদি লক্ষ্যটি ইমগ স্টাইল করা হয় তবে আপনার উচিত:
const img = new Image();
img.src = 'path/to/img.jpg';
img.decode().then(() => {
/* set styles */
/* add img to DOM */
});কারণ ব্রাউজারটি প্রথমে loads the compressed version of image, তারপরে decodes it, অবশেষে paintsএটি। যেহেতু কোনও ইভেন্ট নেই তাই paintব্রাউজারের decodedআইএমজি ট্যাগ থাকার পরে আপনার যুক্তিটি চালানো উচিত ।
আপনি যদি React.js ব্যবহার করে থাকেন তবে আপনি এটি করতে পারেন:
render() {// ...
<img
onLoad={() => this.onImgLoad({ item })}
onError={() => this.onImgLoad({ item })}
src={item.src} key={item.key}
ref={item.key} />// ...
কোথায়: