Действительно ли возможно предварительно загрузить содержание страницы с ajax/jquery техникой?
Благодарим вас за это полезное представление. Я думал, что могу сделать код, предлагаемый в единицу для использования по всему моему приложению, вот код, который я использую в DX10.2 Tokyo. Обратите внимание на пример, обратите внимание на утечки памяти.
unit ScreenCapture;
interface
uses Windows, Vcl.Controls, Vcl.StdCtrls, VCL.Graphics,VCL.Imaging.JPEG, VCL.Forms;
function getScreenCapture( FullWindow: Boolean = True ) : TBitmap;
implementation
function getScreenCapture( FullWindow: Boolean ) : TBitmap;
var
Win: HWND;
DC: HDC;
WinRect: TRect;
Width: Integer;
Height: Integer;
begin
Result := TBitmap.Create;
//Application.ProcessMessages; // Was Sleep(500);
Win := GetForegroundWindow;
if FullWindow then
begin
GetWindowRect(Win, WinRect);
DC := GetWindowDC(Win);
end
else
begin
Windows.GetClientRect(Win, WinRect);
DC := GetDC(Win);
end;
try
Width := WinRect.Right - WinRect.Left;
Height := WinRect.Bottom - WinRect.Top;
Result.Height := Height;
Result.Width := Width;
BitBlt(Result.Canvas.Handle, 0, 0, Width, Height, DC, 0, 0, SRCCOPY);
finally
ReleaseDC(Win, DC);
end;
end;
end.
Пример:
//Any event or button click, screenCapture is a TBitmap
screenCapture := getScreenCapture();
try
//Do some things with screen capture
Image1.Picture.Graphic := screenCapture;
finally
screenCapture.Free;
end;
4 ответа
Нет никакой потребности использовать Ajax для этого. Просто установите отделение обертки страницы display кому: none. Затем измените его на block когда документ загружается.
Ваш код мог бы быть похожим на это, с помощью ванильного JavaScript:
<script type="text/javascript">
function preloader() {
document.getElementById("preloader").style.display = "none";
document.getElementById("container").style.display = "block";
}
window.onload = preloader;
</script>
<style>
div#wrapper {
display: none;
}
div#preloader {
top: 0; right: 10px;
position:absolute;
z-index:1000;
width: 132px; height: 38px;
background: url(path/to/preloaderBg.png) no-repeat;
cursor: wait;
text-shadow: 0px 1px 0px #fefefe; //webkit
}
</style>
<body>
<div id="preloader">Loading... Please Wait.</div>
<div id="wrapper">
<!-- page contents goes here -->
</div>
</body>
Обновление, в jQuery:
<script type="text/javascript">
// Use $(window).load(fn) if you need to load "all" page content including images, frames, etc.
$(document).ready(function(){
$("#preloader").hide();
$("#container").show();
});
</script>
Связанные документы: События / готовый, $ Events/load, CSS/css & Core/
Если вы выберете метод, при котором содержимое будет скрыто до тех пор, пока не будет загружена вся страница, не нужно сначала скрывать его в CSS, а затем отображать в JavaScript. Если вы это сделаете, любой, у кого отключен или недоступен JavaScript, вообще не получит никакой страницы. Вместо этого сделайте как скрытие, так и отображение из сценария.
<body>
<script type="text/javascript">
document.body.style.visibility= 'hidden';
window.onload= function() { document.body.style.visibility= 'visible'; };
</script>
Также обратите внимание, что термин «прелоадер» не совсем подходит для того, что вы здесь делаете. «Pre» означает, что вы увеличиваете производительность за счет выборки и кеширования страницы, чтобы она была готова к работе к тому времени, когда это необходимо.
Но на самом деле это наоборот: он снижает производительность , ожидая, пока пользователю ничего не отображается, пока страница загружается, когда доступен частичный контент. Победа над прогрессивным рендерингом делает просмотр медленнее, а не быстрее. Обычно это явно не та вещь, и, за исключением нескольких нишевых случаев, лучше всего использовать прогрессивный рендеринг в обычном браузере. Так работает Интернет; люди уже привыкли к этому.
(Люди, за исключением тех недалеких руководителей, которые на самом деле не используют и не понимают Интернет, но требуют, чтобы сайт их компании появлялся сразу.)
Я сделал что-то, где я должен был знать, когда изображение было полностью загружено, таким образом, я сделал предварительно загружение с $.get() функционируйте и передал функцию обратного вызова как последний параметр. Таким образом, когда изображение было на самом деле загружено, мой обратный вызов, будет стрелять, и я знал бы, что браузер уже имел изображение в кэше.
Можно записать функцию, которая увеличит глобальную переменную для каждого изображения, которое Вы говорите ей предварительно загружать, и затем Ваш обратный вызов может постепенно уменьшить счетчик. Когда счетчик вернется для обнуления, вызовите другую функцию. Эта функция теперь будет стрелять, после того как все изображения предварительно загружены.
Это для изображений. Все остальное, как могут гарантировать, будет загружено, когда $ (документ) .ready () будет запущен. Так, при начале стандартной программы в этой точке все на странице должно быть загружено.
Лучший способ
function ajax(){
$('#wapal').html('path to image');
$.ajax({
url:'somfile.php',
method:'get',
success:function(data){
if(data =='') return;
$('#wapal').html(data);
}
});
}