Как показать скрытый контент, где изображения контента не загружаются, пока контент не отображается? - PullRequest
Новая
       2

Как показать скрытый контент, где изображения контента не загружаются, пока контент не отображается?

0 голосов
/ 30 января 2012

Какой будет хороший способ показать скрытый контент с помощью javascript, не имея элементов изображения <img src="myimage.jpg"> скрытого контента, загружайте свои изображения в Google Chrome или любые другие браузеры до тех пор, пока контент фактически не отобразится?

скрытие содержимого с помощью правила css display: none не помешает загрузке изображений, и я бы хотел избежать использования вызовов ajax.

Ответы [ 4 ]

1 голос
/ 30 января 2012

РЕДАКТИРОВАТЬ 1 , как обсуждалось в комментариях, лучшей альтернативой будет использование шаблона.В качестве примера я выбрал Микротемблирующий движок Джона Резига : 

<div id="content_container">
    <script type="text/html" id="content">
        <div>
            <img src="..."/>
        </div>
    </script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = tmpl('content', {});">show div</button>

См. скрипка

РЕДАКТИРОВАНИЕ 2

Как прокомментировал оригинальный автор, вполне возможно получить содержимое элемента <script type="text/html">.В шаблонизаторе нет необходимости: 

<div id="content_container">
    <script type="text/html" id="content">
        <div>
            <img src="..."/>
        </div>
    </script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = document.getElementById('content').innerHTML;">show div</button>

Первый ответ

(см. В редакции)

0 голосов
/ 31 января 2012

Похоже, что можно скрыть содержимое, используя тег script с type = "text / html", он даже предотвращает загрузку изображений и фреймов в фоновом режиме, например: 

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.addEventListener('click',function(e){
    if(e.target.id=='content_show'){
        e.preventDefault();
        document.getElementById('content_visible').innerHTML = document.getElementById('content_hidden').innerHTML;//document.getElementById('content_hidden').text also works
    }
});
</script>
</head>
</body>
<img src="image1.jpg"/>
<script type="text/html" id="content_hidden">
<img src="image2.jpg"/>
<img src="image3.jpg"/>
<img src="image4.jpg"/>
</script>
<a href="#showcontent" id="content_show">Show Content</a>
<div id="content_visible"></div>
</body>
</html>

Единственное, что нужно иметь в виду, это избегать размещения тегов скрипта внутри # content_hidden.

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

0 голосов
/ 30 января 2012

Чтобы сделать то, что вы хотите в соответствии с вашими требованиями, вы можете иметь javascript писать контент, когда вы хотите, чтобы он отображался. Таким образом, вы должны хранить свой HTML-код в строке JavaScript и просто использовать скрипт, чтобы затем вставить его на страницу, когда захотите. Это не очень хороший способ сделать это, но это будет означать, что он будет загружать изображения только в этой точке.

В качестве альтернативы вы можете вставить HTML-код, но изображения должны указывать ни на что (или пустой заполнитель и т. Д.), А затем использовать скрипт для программного наполнения источников изображений до правильных значений при вызове функции show для отображения страницы. .

Какой из них вы выберете, вероятно, больше о читабельности, чем что-либо еще, хотя я бы предпочел второй подход (просто настройку источников изображения).

0 голосов
/ 30 января 2012

Сначала определите стиль CSS: 

.invisible {
    display: none;
}

Добавьте этот класс к объектам в HTML.Затем в любом месте JavaScript просто добавьте или удалите класс или измените отображение на block или float и т. Д. В jQuery:

http://api.jquery.com/addClass/

http://api.jquery.com/show/

РЕДАКТИРОВАНИЕ:

Если вы не хотите, чтобы изображение загружалось, вместо этого используйте вызов AJAX.

http://api.jquery.com/jQuery.get/

jQuery.get('myImage.jpg', function(data) {
  jQuery('.imageContainer').html(data);
});

РЕДАКТИРОВАТЬ 2:

Загрузите src в img, как только это потребуется.Вы можете проверить положение прокрутки и т. Д.

http://jsfiddle.net/LYMRV/

...