Mam stronę internetową, która wyświetla listę około 20 automatycznych slajdów (każdy zawierający 4-5 zdjęć) na stronie. Teraz problem polega na tym, że zajmuje to długi czas, aby załadować stronę internetową (& Ogourse, ponieważ tak wiele zdjęć), ale chcę preferencyjnie załadować wszystkie nowe pliki CSS i JS na początku, dzięki czemu pozostałe komponenty na Strona jest prawidłowo wykonana przed pobraniem obrazów.

Więc ... Czy istnieje sposób na ustawienie preferencyjnego kolejności ładowania żądanych zasobów?

1
Rajat Gupta 30 wrzesień 2011, 00:18

3 odpowiedzi

Najlepsza odpowiedź

Czy istnieje sposób, aby ustawić preferencyjny kolejność załadunku żądanych zasobów

Tak - umieść je w tej kolejności w pliku HTML!

Chcę, aby preferencyjnie załadować wszystkie nowe pliki CSS i JS na początku, dzięki czemu inne komponenty na stronie są prawidłowo wykonane, zanim obrazy zaczną pobierać.

To inny problem.

Komponenty strony nie mogą być prawidłowo wykonane, dopóki nie są znane wymiary większości elementów. Więc jeśli masz inne obrazy w układzie strony, muszą być załadowane najpierw lub mają ich szerokość i atrybuty wysokości określone w znaczniku.

Ponieważ obrazy slajdów byłyby wymieszane z resztą układu, jeśli użyłeś czystego HTML, aby je załadować, brzmi, jakbyś miał mały wybór, ale zamiast tego ładować wszystkie obrazy pokazują zdjęcia z JavaScript, na inne komentarze i odpowiedzi.

1
Alnitak 29 wrzesień 2011, 21:03

Lepszy sposób, a następnie użycie DOM do tworzenia elementów ma swoje Divs, a nawet znaczniki IMG SRC, a następnie załaduj je z obrazami, które chcesz w funkcji Onload przy użyciu InnerHTML:

function images(){
  var place_to_put_image = document.getElementById("image_div");
  place_to_put_image.innerHTML = "<img src=\"your_image_here\"></img>"; 
}

<body onload="images()>
  <div id="image_div></div>
</body>

Możesz umieścić swoje obrazy w tablicy i przypisać innerhtml div lub cokolwiek do tablicy, jeśli chcesz, jeśli chcesz je wszystkie w tym samym miejscu, albo możesz umieścić onload w div lub gdziekolwiek chcesz, aby obrazy załadowały.

0
Ryan 29 wrzesień 2011, 20:43

Istnieje kilka sposobów, jakie możesz zrobić, ale wszyscy wiążą się nie wkładać zdjęcia w HTML - przynajmniej nie poprawnie. Jednym ze sposobów, w jaki lubię zrobić, aby dodać obraz src do innej własności, jak alt (nie jest świetny do dostępności) lub rel. Ponadto, podaj wszystkie obrazy, które będzie używany do zaczepiania do JS.

<img alt="images/foo.jpg" class="loadlater" />

Następnie w JS zdobądź wszystkie elementy za pomocą class="loadlater" i ustaw źródło wartości alt.

img.src = img.alt;

Nie wspominałeś o jQuery. Jeśli korzystałeś z jQuery, polecenie do zamieniania atrybutów wyglądałoby tak:

$('.loadlater').each(function() { this.src=this.alt; });

Następnie, gdziekolwiek i za każdym razem, gdy zadzwonisz, obrazy zostaną załadowane. Będziesz chciał go nazwać po załadowaniu CSS i JS - prawdopodobnie funkcja document.load. Ponownie, jeśli używasz jQuery, wyglądałoby to:

$(function()
{
    $('.loadlater').each(function() { this.src=this.alt; });
});
0
Jeff 5 październik 2011, 18:26