[英]How to verify background (css) image was loaded?
I have the following CSS class that I'm applying on a <td>
tag:我在
<td>
标签上应用了以下 CSS 类:
.bg {
background-image: url('bg.jpg');
display: none;
}
How can I tell with JavaScript/jQuery that the background image finished loading?如何使用 JavaScript/jQuery 判断背景图像已完成加载?
The only way I know of to do this is to load the image using Javascript, and then set that image as the backgroud.我所知道的唯一方法是使用 Javascript 加载图像,然后将该图像设置为背景。
For example:例如:
var bgImg = new Image();
bgImg.onload = function(){
myDiv.style.backgroundImage = 'url(' + bgImg.src + ')';
};
bgImg.src = imageLocation;
Give the class to a div with visibility:hidden
at the initial page load.在初始页面加载时将类提供给具有
visibility:hidden
的 div visibility:hidden
。 That way, it'll already be in the browser cache when you assign the class to your table cell.这样,当您将类分配给表格单元格时,它就已经在浏览器缓存中了。
This article may help you . 这篇文章可能对你有所帮助。 Relevant section:
相关栏目:
// Once the document is loaded, check to see if the
// image has loaded.
$(
function(){
var jImg = $( "img:first" );
// Alert the image "complete" flag using the
// attr() method as well as the DOM property.
alert(
"attr(): " +
jImg.attr( "complete" ) + "\n\n" +
".complete: " +
jImg[ 0 ].complete + "\n\n" +
"getAttribute(): " +
jImg[ 0 ].getAttribute( "complete" )
);
}
);
Basically select the background-image and do the check to see it's loaded.基本上选择背景图像并检查它是否已加载。
@Jamie Dixon - he didn't say he wanted to do anything with the background image, just know when it's loaded... @Jamie Dixon - 他没有说他想对背景图片做任何事情,只要知道它什么时候加载......
$(function( )
{
var a = new Image;
a.onload = function( ){ /* do whatever */ };
a.src = $( 'body' ).css( 'background-image' );
});
You also can provide a function that simply replaces the img tag by the div/background so that you benefit from both the onload attribute and the flexibility of the div.您还可以提供一个函数,通过 div/background 简单地替换 img 标签,以便您从 onload 属性和 div 的灵活性中受益。
Of course, you can fine tune the code to best suits your need, but in my case, I also make sure that either the width or the height is preserved for a better control of what I expect.当然,您可以微调代码以最适合您的需要,但就我而言,我还确保保留宽度或高度以更好地控制我的期望。
My code as follows:我的代码如下:
<img src="imageToLoad.jpg" onload="imageLoadedTurnItAsDivBackground($(this), true, '')">
<style>
.img-to-div {
background-size: contain;
}
</style>
<script>
// Background Image Loaded
function imageLoadedTurnItAsDivBackground(tag, preserveHeight, appendHtml) {
// Make sure parameters are all ok
if (!tag || !tag.length) return;
const w = tag.width();
const h = tag.height();
if (!w || !h) return;
// Preserve height or width in addition to the image ratio
if (preserveHeight) {
const r = h/w;
tag.css('width', w * r);
}
else {
const r = w/h;
tag.css('height', h * r);
}
const src = tag.attr('src');
// Make the img disappear (one could animate stuff)
tag.css('display', 'none');
// Add the div, potentially adding extra HTML inside the div
tag.after(`
<div class="img-to-div" style="background-image: url(${src}); width: ${w}px; height:${h}px">${appendHtml}</div>
`);
// Finally remove the original img, turned useless now
tag.remove();
}
</script>
One issue with onload
is that it fires when the data is ready, not when it is done rendering. onload
一个问题是它在数据准备好时触发,而不是在渲染完成时触发。
For one project I load a bunch of medium large images.对于一个项目,我加载了一堆中大图像。 As the images are loading one get the effect of images “popping into existence” in a fragmented way.
随着图像的加载,人们会以一种碎片化的方式获得图像“突然出现”的效果。
Solved this by using a combination of onload
and decode
.通过使用
onload
和decode
的组合解决了这个问题。
As for Q: “How can I tell that the background image finished loading?” Q: “如何判断背景图片加载完成了?” .
. It can be interpreted in several ways;
它可以有多种解释; but if one is looking for finished rendering this is an attack on that issue.
但如果有人正在寻找完成的渲染,这是对这个问题的攻击。
Simplified:简化:
img.onload = () => {
some_elm.style.backgroundImage = 'url(' + some_src + ')';
img.decode().then(some_function).catch(some_function);
}
img.onerror = some_function;
img.src = some_src;
Where some_function
simply checks a counter on all the images loaded, but can of course also be used for one image. some_function
只是在所有加载的图像上检查计数器,但当然也可以用于一个图像。
Guess it can easily be the overhead of decode()
that causes it to flow nice, but have worked very well.猜猜它很容易是
decode()
的开销,导致它流得很好,但效果很好。
Have found it to work nice both for loading <img>
elements, (using decode
only), and backgrounds ( onload
+ decode
).发现它在加载
<img>
元素(仅使用decode
)和背景( onload
+ decode
)时都能很好地工作。
Then one can do anything from simply adding a class to a wrapper or add some fancy effects - for example fading in image by image in ordered fashion etc.然后可以做任何事情,从简单地向包装器添加一个类或添加一些奇特的效果 - 例如以有序的方式逐个图像淡入淡出等。
Also note Browser Compatibility for decode()
.还要注意
decode()
浏览器兼容性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.