2

Нужно загрузить изображения в два блока (#div_left, #div_right) после полной загрузки страницы сайта.

5
  • Почему не загружать вместе со страницей?
    – cpp_user
    16 июл 2015 в 23:06
  • Фото большие и тормозят загрузку страницы сайта
    – user185447
    16 июл 2015 в 23:34
  • Грузят сначала маленькие превьюшки вообще то.
    – cpp_user
    16 июл 2015 в 23:39
  • Да я знаю но мне этот вариант не подходит
    – user185447
    17 июл 2015 в 0:36
  • @Muson взгляните на мой ответ либо можно воспользоваться готовым плагином ленивой загрузки, как посоветовал IonDen
    – Alliswell
    17 июл 2015 в 10:34

4 ответа 4

5

Вместо src напишите что-нибудь вроде data-src. Потом, когда надо загрузить изображения, напишите $('[data-src]').each(changeDataSrcToSrc);

jQuery(function($) {
    $('[data-src]').each(changeDataSrcToSrc);
});

function changeDataSrcToSrc(i, e) {
    e.src = $(e).data('src');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hello
<img data-src="//placehold.it/32x20">
<img data-src="//placehold.it/32x40">
<img data-src="//placehold.it/32x50">
world
<img data-src="//placehold.it/32x10">

2

Вы так же можете попробовать использовать плагин LazyLoad Он предназначен для того, чтобы загружать изображения только после того, как пользователь доскроллил до них. В вашем случае, если изображения уже есть в области видимости, они так же начнут загружаться только после того, как загрузился весь DOM и запустился JS.

2

Стандартное решение примерно такое:

HTML

<img style="display:none;" src="...">
// либо если используете bootstrap
<img class="hidden" src="...">

JS

window.load = function() {
    $('img').show();
};
0

Скорее всего так:

$(function() {
  $("#div_left").css('background-image', '/img1.png');
  $("#div_right").css('background-image', '/img2.png');
});

Но если надо дождаться загрузки всех картинок на странице и только после этого добавлять фон, то так:

$(window).load(function() {
  $("#div_left").css('background-image', '/img1.png');
  $("#div_right").css('background-image', '/img2.png');
});

PS: http://tech-blog.maddyzone.com/javascript/document-ready-vs-window-load-vs-window-onload

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.