Jak wyświetlić obraz podczas wczytywania dużego obrazu?Jak wyświetlić obraz podczas wczytywania dużego obrazu?
Jako przykład w serwisie orkut podczas wyświetlania zdjęcia w albumie użytkownika użytkownika jest ładowany obraz wyświetlany nad zdjęciem do momentu całkowitego załadowania zdjęcia.
Muszę zaimplementować tę funkcję.
Moje pytanie brzmi: jak zaimplementować tę funkcję? Czy to możliwe bez korzystania z JQuery?
Proszę o pomoc.
Oto podstawowe techniki, które można rozszerzać, aby zrobić bardziej wyszukane rzeczy z
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
onload = function()
{
// Create an image object. This serves as a pre-loader
var newImg = new Image();
// When the image is given a new source, apply it to a DOM image
// after it has loaded
newImg.onload = function()
{
document.getElementById('test').src = newImg.src;
}
// Set the source to a really big image
newImg.src = "http://apod.nasa.gov/apod/image/0710/iapetus2_cassini_big.jpg";
}
</script>
</head>
<body>
<img id="test" src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" >
</body>
</html>
Zawiń obraz w div (lub cokolwiek chcesz) i ustaw jego obraz tła jako animowany gif lub jakikolwiek inny ładowany obraz. Po zakończeniu ładowania obraz zasłoni obraz tła. Łatwy i można go ponownie wykorzystać w dowolnym miejscu.
<div class="loading">
<img src="bigimage.jpg" alt="test" />
</div>
CSS:
.loading{
background:transparent url(loadinggif.gif) center center no-repeat;
}
Opakowanie 'div' nie jest konieczne. Możesz zastosować tło do obrazu. Ponadto, jeśli obraz jest przezroczysty, obraz ładowania będzie widoczny pod –
Czy jest jakikolwiek inny sposób korzystania z asp.net ajax lub prosty javascript nto JQuery. Proszę pomóż. Thaks za twoją odpowiedź. – Himadri
@Himadri - dlaczego chcesz go bardziej skomplikować? – Skilldrick
Mogłeś użyć jQuery Lazy Loading plugin. Pozwala określić obraz ładujący i opóźnia ładowanie dużych obrazów, dopóki nie zostaną przewinięte do widoku.
Czy jest jakikolwiek inny sposób korzystania z asp.net ajax lub javascript zamiast JQuery? Dzięki za ur. – Himadri
Edytuj: Wygląda na to, że jest to przestarzałe. Nic tu do oglądania, ruszać się.
Do tego nie jest potrzebny JavaScript ani CSS. Po prostu użyj wbudowanej, ale rzadko słyszanej, właściwości dla elementów dla elementów img.
<img src="giant-image.jpg" lowsrc="giant-image-lowsrc.gif">
Podstawową ideą jest stworzenie dodatkowej bardzo skompresowanej, prawdopodobnie czarno-białej wersji normalnego obrazu. Najpierw jest ładowany, a po pobraniu obrazu w pełnej rozdzielczości przeglądarka automatycznie go zastępuje. Najlepsze jest to, że nie musisz nic robić.
Sprawdź to tutaj: http://www.htmlcodetutorial.com/images/_IMG_LOWSRC.html
Żałuję, że nie mogłem dać więcej poparcia. – eyelidlessness
Byłem zafascynowany tą odpowiedzią, ponieważ nigdy wcześniej nie słyszałem o własności "Lowsrc". Zrobiłem wyszukiwarkę Google i natknąłem się na to: http://blog.throbs.net/2009/05/27/Hey+JLo+Wśród+Did+LowSRC+Go.aspx Wygląda na to, że "Lowsrc" jest przestarzałe dla chwila. Jedyne źródła/strony, które znalazłem dla "lowsrc" są bardzo stare. Nie mogłem również użyć żadnej ze stron do przetestowania (i faktycznie zobaczyć Lowsrc w akcji). Może moje połączenie jest zbyt szybkie. – Jim
Z moich wyszukiwania w Internecie, wygląda na to, że ta właściwość może zostać zhakowana z powrotem za pomocą javascript. Jeśli uruchomisz źródło html z atrybutem image Lowsrc przez http://validator.w3.org/, pokaże się, że "Lowsrc" nie jest prawidłowym atrybutem. – Jim
czas temu zrobiłem coś takiego dla podobnego problemu:
<script>
function imageLoaded(img) {
document.getElementById('loadingImage').style.visibility='hidden';
img.style.visibility='visible';
}
</script>
...
<img id='loadingImage' src='loading.gif'/>
<img src='bigImage.jpg' style='visibility:hidden;' onload='javascript:imageLoaded(this);'/>
myślę, że to podejście ma kilka przydatnych zalet:
Odpowiedź zdecydowanie warta nagrody. Działa i dobrze wyjaśniono. – matm