Как проверить, что фоновое (CSS) изображение было загружено? - PullRequest
Новая
       33

Как проверить, что фоновое (CSS) изображение было загружено?

26 голосов
/ 18 декабря 2009

У меня есть следующий класс CSS 

.bg {
   background-image: url('bg.jpg');
   display: none;
}

, который я применяю к тегу TD.

У меня вопрос, как я могу сказать с помощью JavaScript / jQuery, что фоновое изображение закончило загрузку?

Спасибо.

ОБНОВЛЕНИЕ: добавлено свойство отображения. Так как моя главная цель это переключить его в поле зрения.

Ответы [ 5 ]

43 голосов
/ 18 декабря 2009

Единственный известный мне способ сделать это - загрузить изображение с помощью Javascript, а затем установить это изображение в качестве фона.

Например: 

var bgImg = new Image();
bgImg.onload = function(){
   myDiv.style.backgroundImage = 'url(' + bgImg.src + ')';
};
bgImg.src = imageLocation;
3 голосов
/ 18 декабря 2009

@ Джейми Диксон - он не говорил, что хочет что-то сделать с фоновым изображением, просто знает, когда оно загружено ... 

$(function( )
{
    var a = new Image;
    a.onload = function( ){ /* do whatever */ };
    a.src = $( 'body' ).css( 'background-image' );
});
3 голосов
/ 18 декабря 2009

Передайте класс div с visibility:hidden при начальной загрузке страницы. Таким образом, он уже будет в кеше браузера, когда вы назначите класс ячейке таблицы.

2 голосов
/ 18 декабря 2009

Эта статья может помочь вам . Соответствующий раздел: 

// 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" )
        );
    }
);

В основном выберите фоновое изображение и выполните проверку, чтобы увидеть, загружено ли оно

0 голосов
/ 23 октября 2017

Вы также можете предоставить функцию, которая просто заменяет тег 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>
...