Загружайте контент только тогда, когда пользователь нажимает на элемент.

Question

У меня есть ситуация в блоге, где у меня есть кнопки поделиться.Вы нажимаете на кнопку «Поделиться», и появляется окно, показывающее некоторые места, где вы можете поделиться сообщением.Выглядит круто и все такое, но из-за того, что с разных серверов (фейсбук, твиттер и т. Д.) Происходит выборка большого количества данных, загрузка страницы занимает больше времени, чем мне бы хотелось, но при загрузке этих кнопок все спотыкается.

Как (предпочтительно с использованием jQuery) можно сделать так, чтобы кнопки для facebook и т. Д. Загружались при нажатии пользователем кнопки «Поделиться», а не при загрузке страницы, чтобы я мог сократить время загрузки страницы?

Мне всегда было интересно, как ты это делаешь, но мне никогда не нужно было это делать.

Редактировать: Для справки, кнопка «Поделиться» делает это при нажатии на нее.Это не очень сложно.

$('.share').click(function(e) {

            $('.popup-share').fadeOut('100');

    if($(this).parents('.share-is-care').children('.popup-share').is(':visible')) {
        $(this).parents('.share-is-care').children('.popup-share').fadeOut('100');
    }
    else {
        $(this).parents('.share-is-care').children('.popup-share').fadeIn('100');
    }

}

Answer 1

Если вы загружаете динамический контент, вы можете динамически добавлять его на свою страницу, используя функции AJAX, вот пример помещения некоторого кода в контейнер:

$('.share').click(function(e) {
    if($(this).parents('.share-is-care').children('.popup-share').is(':visible')) {
        $(this).parents('.share-is-care').children('.popup-share').fadeOut('100');
    } else {
        $.get('http://url_to_get.whatever', function (data) {
            $(this).parents('.share-is-care').children('.popup-share').html(data).fadeIn('100');
        });
    }
}

Если вы просто хотите добавить статический код к элементу при нажатии (например, в iframe, который загружает внешнюю страницу или что-то в этом роде), вы можете сделать что-то вроде этого:

$('.share').click(function(e) {
    if($(this).parents('.share-is-care').children('.popup-share').is(':visible')) {
        $(this).parents('.share-is-care').children('.popup-share').fadeOut('100');
    } else {
        $(this).parents('.share-is-care').children('.popup-share').html('<iframe src="http://www.foo.bar/script.bam"></iframe>').fadeIn('100');
    }
}

Answer 2

Если вы хотите использовать описанную вами функциональность, вам, вероятно, нужно немного изучить AJAX.

По сути, вы в настоящее время встраиваете скрипт какой-то другой стороны, которая предлагает подобную систему (Facebook, Twitter, Google,…).Это загружает при загрузке страницы и заполняет некоторые элементы различными кнопками.Теперь вам нужно отложить выполнение встроенного скрипта, пока не произойдет какое-либо событие (пользователь нажимает кнопку «Поделиться»).

Есть подробное сообщение в блоге с примером кода для кнопки «Нравится» на Facebook, но процесс практически одинаков для всех.места.См. http://www.torbenleuschner.de/blog/119/ladezeit-facebook-like-button-per-jquery-nachladen/ (немецкий язык)

Ключевым моментом является наличие пустого элемента для кнопок, который заполняется только после события (щелкните в вашем случае).Например:

<div class="popup-share"></div>

Затем вам нужно ждать события так же, как вы используете в настоящее время.Но вместо того, чтобы создавать скрипты создания кнопок на загруженной странице, мы будем предполагать, что они содержатся в keys-фрагмент.html.

// Delay function's execution until click and call it exactly once
$('.share').one('click', function loadLikeButtons(e) {
    // Get the empty element
    var likeButtonContainer = $('.popup-share');
    // Fetch the code which contains the buttons (this is AJAX in the background)
    $.get('your-server.com/buttons-fragment.html', {}, function fillInLikeButtons(data){
        // The code in this inner function runs as soon as the code for the buttons is available / was successfully loaded.
        // The argument data contains the same HTML fragment that you are currently using to create the buttons
        // Place the buttons (or button initialization scripts within the still empty button holder
        likeButtonContainer.html(data);
    });
});

Примечание: для решения с более высокой производительностью пропустите AJAX-запрос на выборку HTMLфрагмент.Вместо этого перенесите его с загрузкой страницы, но сохраните в переменной JavaScript.Вставьте его в пустой элемент, удерживающий кнопку, по нажатию кнопки «Поделиться».Я не ставил это решение, потому что думаю, что иметь только одно решение в ответе на ваш вопрос легче для понимания.Возможно, вы захотите открыть еще один вопрос о том, как передать фрагмент HTML при загрузке страницы и вставить его в какое-либо событие.

Также обратите внимание, что я никогда не проверял код, напечатанный выше.Возможно, вы можете нажать опечатки.

В качестве дополнительного примечания (не является частью ответа): учитывайте вопросы, связанные с конфиденциальностью, при размещении на вашем сайте одинаковых кнопок, а также связанные с производительностью вещи.Предположим, что кнопки созданы аналогично следующему коду:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like layout="box_count" show_faces="false" width="55" font="arial"></fb:like>

Как только браузер обнаружит фрагмент, он загрузит скрипт из Facebook.При этом передается адрес вашей страницы, а также возможно установить куки с Facebook.Поэтому, если кто-то все еще вошел в Facebook, Facebook сможет отслеживать его посещение вашего сайта, как только ваш сайт будет загружен.С ответом, представленным выше, это происходит только при нажатии кнопки «Поделиться» (потому что это вызывает загрузку внешних скриптов).