Chcę ustawić obraz tła na znacznika body, a następnie uruchomić jakiś kod - tak:Jak mogę sprawdzić, czy załadowany jest obraz tła?
$('body').css('background-image','http://picture.de/image.png').load(function() {
alert('Background image done loading');
// This doesn't work
});
Jak mogę upewnić się, że obraz tła jest w pełni załadowany?
spróbuj tego:
$('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() {
$(this).remove(); // prevent memory leaks as @benweet suggested
$('body').css('background-image', 'url(http://picture.de/image.png)');
});
to stworzy nowy obraz w pamięci i użyć zdarzenia ładowania w celu wykrycia, gdy src jest załadowany.
Wygląda na to, że obraz zostanie wczytany dwukrotnie bez powodu. – HyderA
@gAMBOOKa Są one ładowane jeden raz, ponieważ pozostają w pamięci przeglądarki. Jest tak samo, gdy umieszczasz ukryte obrazy na górze strony, a następnie ustawiasz je w CSS - aby obrazy zaczęły się pobierać przed plikiem css - to się nazywa preloading. – jcubic
Nie jestem pewien, ale myślę, że masz na myśli pamięć podręczną. Nie sądzę, że jest coś takiego jak pamięć przeglądarki, w której przechowywane są zasoby. Jeśli odwołujesz się do pamięci podręcznej, pamiętaj, że dodajesz dodatkowe żądanie HTTP i wszyscy klienci mogą nie mieć włączonej pamięci podręcznej. – HyderA
coś takiego:
var $div = $('div'),
bg = $div.css('background-image');
if (bg) {
var src = bg.replace(/(^url\()|(\)$|[\"\'])/g, ''),
$img = $('<img>').attr('src', src).on('load', function() {
// do something, maybe:
$div.fadeIn();
});
}
});
hello ... to wydaje się działać, chociaż ustawiłem bg.replace na' bg.replace (..., my_src) 'Ale moje pytanie brzmi: kiedy ładuje się $ (''), co dokładnie dzieje się z tym'
'... mam na myśli, że to nie jest tak naprawdę prawdziwe - to po prostu sztuczny symbol zastępczy, prawda? –
dsdsdsdsd
Dobrze.' '' nigdy nie jest wstawiany do DOM, służy tylko do "oszukania" przeglądarki do załadowania pliku obrazu do pamięci podręcznej. –
Colin
Pomocne, jeśli nie chcesz wywoływać jQuery – vwvan
mam jQuery plugin nazywa waitForImages które mogą wykryć, kiedy obrazy tła pobraniu.
$('body')
.css('background-image','url(http://picture.de/image.png)')
.waitForImages(function() {
alert('Background image done loading');
// This *does* work
}, $.noop, true);
Ta wtyczka jest również świetna do pokazywania postępu ładowania za pomocą "każde" oddzwanianie – Soviut
@alex, Jak powinienem sprawdzić każdy obraz tła dla każdego elementu w klasie? Próbowałem tego, ale nie wydaje się, aby to zrobić poprawnie. $ (". user_main_photo_thumb"). waitForImages (function() { \t $ (this) .parents (". photoThumbFrame"). delay (1000) .slideDown(); \t}, funkcja (ładowanie, liczenie, sukces) { \t}); – Relm
@Relm Nie używasz go poprawnie. Drugie wywołanie zwrotne dotyczy jednego obrazu. Również 'delay()' nie działa w ten sposób. – alex
Oto mały plugin Zrobiłem, co pozwala robić dokładnie to, to też działa na wielu obrazów tła i wielu elementów:
Przeczytaj artykuł:
http://catmull.uk/code-lab/background-image-loaded/
lub przejdź bezpośrednio do kodu wtyczki:
http://catmull.uk/downloads/bg-loaded/bg-loaded.js
Więc po prostu to wtyczki, a następnie wywołać go na elemencie:
<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script>
<script type="text/javascript">
$('body').bgLoaded();
</script>
Oczywiście pobranie wtyczki i zapisać go na własnym hostingu.
domyślnie dodaje dodatkową klasę „BG-załadowane” do każdego znalezionego elementu, gdy tło jest załadowany, ale można łatwo zmienić, przekazując mu inną funkcję tak:
<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script>
<script type="text/javascript">
$('body').bgLoaded({
afterLoaded : function() {
alert('Background image done loading');
}
});
</script>
Oto kodepen pokazujący, że działa.
działa bardzo ładnie! – Vickel
Co się stanie, jeśli się nie uda? –
https://github.com/alexanderdickson/waitForImages
$('selector').waitForImages({
finished: function() {
// ...
},
each: function() {
// ...
},
waitForAll: true
});
zrobiłem czystą javascript włamać aby było to możliwe.
<div class="my_background_image" style="background-image: url(broken-image.jpg)">
<img class="image_error" src="broken-image.jpg" onerror="this.parentElement.style.display='none';">
</div>
Albo
onerror="this.parentElement.backgroundImage = "url('image_placeHolder.png')";
css:
.image_error {
display: none;
}
Wystarczy przypisać ten sam adres URL do 'obrazu()' obiekt, który ma 'onload' wydarzenie. –
pamiętaj o zawinięciu adresu URL css w 'url()' – bluescrubbie