Как проверить, было ли загружено фоновое изображение (css)?
-
20-09-2019 - |
Вопрос
У меня есть следующий CSS-класс
.bg {
background-image: url('bg.jpg');
display: none;
}
который я применяю к тегу TD.
Мой вопрос в том, как я могу с помощью JavaScript / jQuery определить, что фоновое изображение завершило загрузку?
Спасибо.
Обновить:добавлено свойство отображения.Поскольку моя главная цель - включить его в режим просмотра.
Решение
Единственный известный мне способ сделать это - загрузить изображение с помощью Javascript, а затем установить это изображение в качестве фонового изображения.
Например:
var bgImg = new Image();
bgImg.onload = function(){
myDiv.style.backgroundImage = 'url(' + bgImg.src + ')';
};
bgImg.src = imageLocation;
Другие советы
Присвойте класс div с visibility:hidden
при начальной загрузке страницы.Таким образом, он уже будет в кэше браузера, когда вы назначите класс своей ячейке таблицы.
@Джейми Диксон - он не говорил, что хочет что-то делать с фоновым изображением, просто знай, когда оно загружено...
$(function( )
{
var a = new Image;
a.onload = function( ){ /* do whatever */ };
a.src = $( 'body' ).css( 'background-image' );
});
Эта статья может помочь вам.Соответствующий раздел:
// 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" )
);
}
);
В основном выберите фоновое изображение и выполните проверку, чтобы убедиться, что оно загружено.
Вы также можете предоставить функцию, которая просто заменяет тег img на div / background, чтобы вы могли воспользоваться как атрибутом onload, так и гибкостью div.
Конечно, вы можете точно настроить код так, чтобы он наилучшим образом соответствовал вашим потребностям, но в моем случае я также слежу за тем, чтобы ширина или высота были сохранены для лучшего контроля того, что я ожидаю.
Мой код выглядит следующим образом:
<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>