Pagespeed - отложенная загрузка изображений слайд-шоу

Question

Pagespeed - отложенная загрузка изображений слайд-шоу

0

Я пытаюсь уменьшить свои страницы и слайд-шоу у меня есть мое основное препятствие. Для простоты я показываю только 3 изображения в моем коде ниже... У меня есть 17 довольно больших изображений. Я пытаюсь выяснить, как загрузить первое изображение в виде img src или base64 и отложить оставшиеся изображения до завершения загрузки.

html слайд-шоу (использует jquery и js, называемый loopedslider1) loopedSlider js можно найти здесь http://jsfiddle.net/tS27H/

<div id="slider">
<div id="loopedSlider1">
    <div class="container1">
        <div class="slides1">
            <div>
                <img src="i/1.jpg" width="624" height="535" alt="">
                    <p>Copyright  2014 - All Rights Reserved.</p></div>
            <div>
                <img src="i/2.jpg" width="624" height="535" alt="">
                    <p>Copyright  2014 - All Rights Reserved.</p></div>
            <div>
                <img src="i/3.jpg" width="624" height="535" alt="">
                    <p>Copyright  2014 - All Rights Reserved.</p></div>                    
            </div>
        </div>
        <div id=slider1-button-wrap>
            <a class="previous slider1-button-left" href="#">Left</a>
            <a class="next slider1-button-right" href="#">Right</a>
        </div>
    </div>
</div>

Я посмотрел на спрайт, base64, спрайт base64, отложил изображения в css, используя:

<script>
 function downloadAtOnload1() {
 var element1 = document.createElement("style");
 element1.src = "xd.css";
 document.body.appendChild(element1);
 }  
 if (window.addEventListener)
 window.addEventListener("load", downloadAtOnload1, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadAtOnload1);
 else window.onload = downloadAtOnload1;
</script>

<div id="image2">
    <p>Copyright  2014 - All Rights Reserved.</p>
</div>

 #image2{background-image: url(data:image/png;base64,longstring}

Я могу заставить показ слайдов работать только при использовании html img src.

Любые предложения будут ценны.

Kurt Marshman 21 янв. 2014, в 02:02

Источник

0

Как насчет этого как потока? 1. Загрузите все, что увидят пользователи выше сгиба. 2. После window.load загрузите остальные изображения. 3. После загрузки всех изображений запустите слайд-шоу.
Jasper 21 янв. 2014, в 01:12
0

Не знаю, поможет ли это, но у элемента <img> есть событие onload, которое вы можете исследовать, используя.
jeff 21 янв. 2014, в 01:12
0

Какие браузеры вы хотите поддерживать?
cgatian 21 янв. 2014, в 01:28
0

Кроме того, ты мог бы заставить свою скрипку фактически работать?
cgatian 21 янв. 2014, в 01:30
0

@ Джаспер Я понимаю, что вы говорите ... слайд-шоу находится над сгибом с достаточной задержкой, чтобы, если бы я мог понять, как отложить остальные изображения, если это сработает.
Kurt Marshman 21 янв. 2014, в 05:01
0

@jeff Я посмотрю на ваше предложение.
Kurt Marshman 21 янв. 2014, в 05:01
0

@cgatian ... столько браузеров, сколько я могу. Chrome, Safari, IE, если это возможно. Я попытался 3x, чтобы заставить скрипку работать, и все, что я получаю, - чистый черный экран.
Kurt Marshman 21 янв. 2014, в 05:04

Показать ещё 5 комментариев

Теги:

javascript

jquery

html

css

image

1 ответ

Ещё вопросы

Как насчет этого как потока? 1. Загрузите все, что увидят пользователи выше сгиба. 2. После window.load загрузите остальные изображения. 3. После загрузки всех изображений запустите слайд-шоу.
Не знаю, поможет ли это, но у элемента <img> есть событие onload, которое вы можете исследовать, используя.
Какие браузеры вы хотите поддерживать?
Кроме того, ты мог бы заставить свою скрипку фактически работать?
@ Джаспер Я понимаю, что вы говорите ... слайд-шоу находится над сгибом с достаточной задержкой, чтобы, если бы я мог понять, как отложить остальные изображения, если это сработает.
@jeff Я посмотрю на ваше предложение.
@cgatian ... столько браузеров, сколько я могу. Chrome, Safari, IE, если это возможно. Я попытался 3x, чтобы заставить скрипку работать, и все, что я получаю, - чистый черный экран.

Kurt Marshman · Answer 1 · 2014-01-22T12-57-00.000Z

хорошо... так вот как я решил это

Создайте очень маленькое 1px на 1px изображение, которое я назвал blank.png

Измените мой HTML на этот

<div id="slider">
<div id="loopedSlider1">
    <div class="container1">
        <div class="slides1">
            <div>
                <img src="i/1.jpg" width="624" height="535" alt="">
                    <p>Copyright  2014 - All Rights Reserved.</p></div>
            <div>
                <img id="i2" src="blank.png" width="624" height="535" alt="">
                    <p>Copyright  2014 - All Rights Reserved.</p></div>
            <div>
                <img id="i3" src="blank.png" width="624" height="535" alt="">
                    <p>Copyright  2014 - All Rights Reserved.</p></div>                    
            </div>
        </div>
        <div id=slider1-button-wrap>
            <a class="previous slider1-button-left" href="#">Left</a>
            <a class="next slider1-button-right" href="#">Right</a>
        </div>
    </div>
</div>

оставляя первое изображение в слайд-шоу, которое является одним из истинных изображений, которые я хочу показать, задержка в слайд-шоу позволяет заменять все изображения blank.png с использованием отложенного javascript.

Мой тестовый тег defer js размещен в самом низу тега html непосредственно перед закрытием тега body

<script>
 // Add a script element as a child of the body
  function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "x.js";
 document.body.appendChild(element);
 }
 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;
</script>

Что я добавил в файл x.js

jQuery(function(){
$('#i2').attr('src','i/2.jpg')
$('#i3').attr('src','i/3.jpg')
});

Если, если вы пропустите мою страницу на скорость страницы .... i / 1.jpg и blank.png - единственные изображения, которые учитываются в зависимости от скорости моей страницы ... остальные будут отложены до загрузки страницы. Вы можете уменьшить это число до 1, сделав blank.png образ base64.