有什么方法可以使用 onload function 在图像上加载文本？
[英]Is there any way I can load text on an image using onload function?
问题描述
I have used an image in the background of my web page.
我在 web 页面的背景中使用了一张图片。 Now what I want is, after the entire image is loaded, a text should be documented on the same.现在我想要的是，在加载整个图像后，应该在同一图像上记录文本。 For that I have done the following up till now:-为此，到目前为止我已经完成了以下工作：-
<body onload = "myFunction()">
<script>
function myFunction() {
setTimeout(function(){ document.write("<h1>H"); }, 1000);
setTimeout(function(){ document.write("E"); }, 2000);
setTimeout(function(){ document.write("L"); }, 3000);
setTimeout(function(){ document.write("L"); }, 4000);
setTimeout(function(){ document.write("O</h1>"); }, 5000);
}
</script>
</body>
The above works fine without an image, but it doesn't load at all when applied to an image.以上在没有图像的情况下工作正常，但在应用于图像时根本不会加载。
Adding the class style:-添加 class 样式：-
Here, our prime focus is on the very first image which the.bgimg-1 contains.在这里，我们的主要焦点是 the.bgimg-1 包含的第一张图片。
<style>
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5 {
position: relative;
opacity: 0.65;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("Images/Web.jpg");
min-height: 100%;
}
</style>
<body>
<div class="bgimg-1">
<div class="caption">
<h1></h1>
</div>
</div>
<script>
var img = document.querySelector('img');
var h1 = document.querySelector('h1');
img.addEventListener('load', myFunction)
img.addEventListener('error', function() {
alert('error')
})
function myFunction() {
setTimeout(function() {
h1.innerHTML += ("H");
}, 1000);
setTimeout(function() {
h1.innerHTML += ("E");
}, 2000);
setTimeout(function() {
h1.innerHTML += ("L");
}, 3000);
setTimeout(function() {
h1.innerHTML += ("L");
}, 4000);
setTimeout(function() {
h1.innerHTML += ("O");
}, 5000);
}
</script>
</body>
Note:- Only the relevant content code is added here.注意：- 这里只添加了相关的内容代码。
Thank youenter code here谢谢在这里输入代码
3 个解决方案
解决方案1
2 已采纳 2022-10-05 14:36:42
Try this:尝试这个：
var img = document.querySelector('.bgimg-1'); var h1 = document.querySelector('h1'); // create image to detect when loaded var tempImg = new Image(100, 200); tempImg.src = "https://s14-eu5.startpage.com/cgi-bin/serveimage?url=https%3A%2F%2Fmedia1.tenor.com%2Fimages%2F2ddd441a094881de33cd8b283aec1321%2Ftenor.gif%3Fitemid%3D12124817&sp=286b17e46141fd3ae6dd535ee83d0118&anticache=671261"; document.body.appendChild(tempImg); tempImg.addEventListener('load', myFunction) tempImg.addEventListener('error', function() { alert('error'); }) function myFunction() { // set background-image property to image source img.style.backgroundImage = "url(" + tempImg.src + ")"; // remove image after loaded tempImg.parentNode.removeChild(tempImg); setTimeout(function() { h1.innerHTML += ("H"); }, 1000); setTimeout(function() { h1.innerHTML += ("E"); }, 2000); setTimeout(function() { h1.innerHTML += ("L"); }, 3000); setTimeout(function() { h1.innerHTML += ("L"); }, 4000); setTimeout(function() { h1.innerHTML += ("O"); }, 5000); }
.bgimg-1 { background-repeat: no-repeat; background-size: contain; height: 100vh; position: relative; }.caption { position: absolute; top: 0em; left: 1em; color: white; font-size: 1em; }
<body> <div class="bgimg-1"> <div class="caption"> <h1></h1> </div> </div> </body>
解决方案2
1 已采纳 2020-01-12 17:31:29
Keeping your existing function, just add a 'load' event listener to the image and add another element to display the message.保留您现有的功能，只需向图像添加一个“加载”事件侦听器并添加另一个元素来显示消息。
var img = document.querySelector('img'); var h1 = document.querySelector('h1'); img.addEventListener('load', myFunction) img.addEventListener('error', function() { alert('error') }) function myFunction() { setTimeout(function() { h1.innerHTML += ("H"); }, 1000); setTimeout(function() { h1.innerHTML += ("E"); }, 2000); setTimeout(function() { h1.innerHTML += ("L"); }, 3000); setTimeout(function() { h1.innerHTML += ("L"); }, 4000); setTimeout(function() { h1.innerHTML += ("O"); }, 5000); }
h1 { position: absolute; top: 3em; left: 1em; }
<body> <img src="https://media.istockphoto.com/photos/friendlylooking-european-teenager-dressed-in-yellow-pulover-saying-picture-id976585934?k=6&m=976585934&s=612x612&w=0&h=C9-wIeuzewmBfBmRU6oSqt9jky9ZOAbB7JHFmH6Bf3k="> <h1></h1> </body>
Edit: Updated answer for updated question - A background image doesn't have a load event, so in order to do this, you'd create a new Image() object and set its source to the image you want.编辑：更新问题的更新答案 - 背景图像没有load事件，因此为了做到这一点，您需要创建一个新的Image()对象并将其source设置为您想要的图像。 Then listen for that image to load.然后听那个图像加载。 When it does, set your div's backgroundImage to the image source and remove the created image.当它发生时，将您的 div 的backgroundImage设置为图像源并删除创建的图像。
var img = document.querySelector('.bgimg-1'); var h1 = document.querySelector('h1'); // create image to detect when loaded var tempImg = new Image(100, 200); tempImg.src = "https://s14-eu5.startpage.com/cgi-bin/serveimage?url=https%3A%2F%2Fmedia1.tenor.com%2Fimages%2F2ddd441a094881de33cd8b283aec1321%2Ftenor.gif%3Fitemid%3D12124817&sp=286b17e46141fd3ae6dd535ee83d0118&anticache=671261"; document.body.appendChild(tempImg); tempImg.addEventListener('load', myFunction) tempImg.addEventListener('error', function() { alert('error'); }) function myFunction() { // set background-image property to image source img.style.backgroundImage = "url(" + tempImg.src + ")"; // remove image after loaded tempImg.parentNode.removeChild(tempImg); setTimeout(function() { h1.innerHTML += ("H"); }, 1000); setTimeout(function() { h1.innerHTML += ("E"); }, 2000); setTimeout(function() { h1.innerHTML += ("L"); }, 3000); setTimeout(function() { h1.innerHTML += ("L"); }, 4000); setTimeout(function() { h1.innerHTML += ("O"); }, 5000); }
.bgimg-1 { background-repeat: no-repeat; background-size: contain; height: 100vh; position: relative; } .caption { position: absolute; top: 0em; left: 1em; color: white; font-size: 1em; }
<body> <div class="bgimg-1"> <div class="caption"> <h1></h1> </div> </div> </body>
解决方案3
0 2020-01-12 17:23:36
You should not use document.write .你不应该使用document.write 。 You should also avoid using setTimeout unless you really need it.你也应该避免使用setTimeout除非你真的需要它。
That said, what you need to do is to add a load event listener to your image.也就是说，您需要做的是为您的图像添加一个load 事件侦听器。 Once it loads, you can make your message visible.加载后，您可以使您的消息可见。
Here's a very basic example.这是一个非常基本的例子。
const image = document.querySelector('.image'); const message = document.querySelector('.message'); image.addEventListener('load', () => { message.classList.remove('hide') });
.hide { opacity: 0; pointer-events: none; } .message { background: white; border-radius: 1em; padding: 3em; position: fixed; top: 1em; left: 1em; z-index: 1; transition: opacity 0.5s ease-in-out; }
<img class="image" src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg"> <div class="message hide"> <p>Hello World!</p> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.