반응형
이미지가 로드될 때 자바스크립트 콜백을 실행하려면 어떻게 해야 합니까?
이미지 로드가 언제 완료되었는지 알고 싶습니다.콜백으로 할 수 있는 방법이 있습니까?
그렇지 않다면, 그것을 할 수 있는 방법이 있습니까?
.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')
})
}
출처: http://www.html5rocks.com/en/tutorials/es6/promises/
Image.onload()는 종종 작동합니다.
이를 사용하려면 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>Javascript 이미지 클래스의 .complete 속성을 사용할 수 있습니다.
여러 개의 이미지 개체를 배열에 저장하여 화면에 동적으로 추가하고 로드하는 동안 페이지의 다른 div에 업데이트를 기록하는 응용 프로그램이 있습니다.다음은 코드 조각입니다.
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);
}
인생은 농담하기에 너무 짧습니다.
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="">jQuery에서 load()-event를 사용할 수 있지만 브라우저 캐시에서 이미지를 로드하면 항상 실행되지 않습니다.이 플러그인 https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js 을 사용하여 문제를 해결할 수 있습니다.
다음은 jQuery에 해당하는 내용입니다.
var $img = $('img');
if ($img.length > 0 && !$img.get(0).complete) {
$img.on('load', triggerAction);
}
function triggerAction() {
alert('img has been loaded');
}
브라우저가 이미지를 렌더링한 후 img를 스타일화하는 것이 목적이라면 다음을 수행해야 합니다.
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브라우저가 실행된 후에 논리를 실행해야 합니다.decodedimg 태그
질문이 있었던 2008년에는 적합하지 않지만, 요즘에는 이것이 저에게 잘 맞습니다.
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 } };
}
이것은 저에게 효과가 있었습니다.
// Usage
let img = await image_on_load(parent_element_to_put_img, image_url);
img.hidden = true;
// Functions
async function image_on_load(parent, url) {
let img = element(parent, 'img');
img.src = url;
await new Promise((resolve, reject) => {
element_on(img, 'load', () => {
resolve();
});
element_on(img, 'error', () => {
reject();
});
});
return img;
}
function element(parent, tag_name, text = '') {
let result = document.createElement(tag_name);
element_child_append(parent, result);
element_html_inner(result, text);
return result;
}
function element_child_append(parent, result) {
parent.appendChild(result);
}
function element_html_inner(result, text) {
result.innerHTML = text;
}
function element_on(e, event, on_event) {
e.addEventListener(event, async () => {
await on_event();
});
}
React.js를 사용하는 경우 다음 작업을 수행할 수 있습니다.
render() {
// ...
<img
onLoad={() => this.onImgLoad({ item })}
onError={() => this.onImgLoad({ item })}
src={item.src} key={item.key}
ref={item.key} />
// ... }
위치:
언급URL : https://stackoverflow.com/questions/280049/how-can-i-run-a-javascript-callback-when-an-image-is-loaded
반응형
'programing' 카테고리의 다른 글
| 보조 테이블을 통한 재귀 선택 사용 (0) | 2023.08.07 |
|---|---|
| Linux에서 도커를 중지하는 방법 (0) | 2023.08.07 |
| UIImageView 뒤에 그림자를 만드는 가장 좋은 방법은 무엇입니까? (0) | 2023.08.07 |
| 안드로이드 레이아웃 XML에서 앱:srcCompat과 안드로이드:src의 차이점 (0) | 2023.08.07 |
| 키 저장소 정보를 build.gradle에 넣지 않고 APK 서명 (0) | 2023.08.07 |