, но тот код JQuery, который вы мне прислали, теперь будет включен в мой глобальный файл js, который будет использоваться на другой странице :) * хахаха, мне пришлось разбить мой комментарий на две части, из-за недостатка места.
лучший способ предварительно загрузить изображения? Я пытаюсь создать вкладку изображений, которая имеет около 59 изображений PNG. Вот код, который у меня есть:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Checklist</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/systems_hr/Style%20Library/globalstyles_test.css">
<style type="text/css">
#innerframe {
width: 100%;
height: 63em;
}
</style>
<script type="text/javascript" src="/systems_hr/Style%20Library/JavaScripts/styles.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript">
var id1 = new Image();
id1.src = "images/id1.png";
var id11 = new Image();
id11.src = "images/id1-1.png";
var id12 = new Image();
id12.src = "images/id1-2.png";
var id13 = new Image();
id13.src = "images/id1-3.png";
var id2 = new Image();
id2.src = "images/id2.png";
var id21 = new Image();
id21.src = "images/id2-1.png";
var id22 = new Image();
id22.src = "images/id2-2.png";
var id23 = new Image();
id23.src = "images/id2-3.png";
var id3 = new Image();
id3.src = "images/id3.png";
var id31 = new Image();
id31.src = "images/id3-1.png";
var id32 = new Image();
id32.src = "images/id3-2.png";
var id33 = new Image();
id33.src = "images/id3-3.png";
var id4 = new Image();
id4.src = "images/id4.png";
var id41 = new Image();
id41.src = "images/id4-1.png";
var id42 = new Image();
id42.src = "images/id4-2.png";
var id43 = new Image();
id43.src = "images/id4-3.png";
var iw1 = new Image();
iw1.src = "images/iw1.png"
var iw11 = new Image();
iw11.src = "images/iw1-1.png"
var iw12 = new Image();
iw12.src = "images/iw1-2.png"
var iw13 = new Image();
iw13.src = "images/iw1-3.png"
var iw14 = new Image();
iw14.src = "images/iw1-4.png"
var iw2 = new Image();
iw2.src = "images/iw2.png"
var iw21 = new Image();
iw21.src = "images/iw2-1.png"
var iw22 = new Image();
iw22.src = "images/iw2-2.png"
var iw23 = new Image();
iw23.src = "images/iw2-3.png"
var iw24 = new Image();
iw24.src = "images/iw2-4.png"
var iw3 = new Image();
iw3.src = "images/iw3.png"
var iw31 = new Image();
iw31.src = "images/iw3-1.png"
var iw32 = new Image();
iw32.src = "images/iw3-2.png"
var iw33 = new Image();
iw33.src = "images/iw3-3.png"
var iw34 = new Image();
iw34.src = "images/iw3-4.png"
var iw4 = new Image();
iw4.src = "images/iw4.png"
var iw41 = new Image();
iw41.src = "images/iw4-1.png"
var iw42 = new Image();
iw42.src = "images/iw4-2.png"
var iw43 = new Image();
iw43.src = "images/iw4-3.png"
var iw44 = new Image();
iw44.src = "images/iw4-4.png"
var im1 = new Image();
im1.src = "images/im1.png"
var im11 = new Image();
im11.src = "images/im1-1.png"
var im12 = new Image();
im12.src = "images/im1-2.png"
var im13 = new Image();
im13.src = "images/im1-3.png"
var im2 = new Image();
im2.src = "images/im2.png"
var im21 = new Image();
im21.src = "images/im2-1.png"
var im22 = new Image();
im22.src = "images/im2-2.png"
var im23 = new Image();
im23.src = "images/im2-3.png"
var im3 = new Image();
im3.src = "images/im3.png"
var im31 = new Image();
im31.src = "images/im3-1.png"
var im32 = new Image();
im32.src = "images/im3-2.png"
var im33 = new Image();
im33.src = "images/im3-3.png"
function changeFrame (frameSRC)
{
var myFrame = document.getElementById('fraContent');
myFrame.contentWindow.location = frameSRC;
}
function rolloverArea(area, orgImgSrc, tgtImgSrc, orgCursor, tgtCursor) // jQuery script for rollover effect
{
$("#imgTab").attr("src", orgImgSrc);
$(area).hover(
function()
{
$("#imgTab").attr("src", tgtImgSrc);
$("#imgTab").css("cursor",tgtCursor);
},
function()
{
$("#imgTab").attr("src", orgImgSrc);
$("#imgTab").css("cursor",orgCursor);
}
);
}
/*function initLoad ()
{
}*/
function changeImgState(img) // tab interface of Day Week and Month arrows
{
var myImgTab = document.getElementById("imgTab");
switch (img)
{
case 'id1':
myImgTab.src = id1.src;
// Rollover effect for the image
rolloverArea("#area1",id1.src,id1.src,"auto","auto");
rolloverArea("#area2",id1.src,id11.src,"auto","pointer");
rolloverArea("#area3",id1.src,id12.src,"auto","pointer");
rolloverArea("#area4",id1.src,id13.src,"auto","pointer");
rolloverArea("#area5",id1.src,id1.src,"auto","auto");
// onClick effect
$("#area2").click(function() {
$("#innerframe").attr("src","D2.html");
changeImgState("id2");
}
);
$("#area3").click(function() {
$("#innerframe").attr("src","D3.html");
changeImgState("id3");
}
);
$("#area4").click(function() {
$("#innerframe").attr("src","D4.html");
changeImgState("id4");
}
);
break;
case 'id2':
myImgTab.src = id2.src;
// Rollover effect for the image
rolloverArea("#area1",id2.src,id21.src,"auto","pointer");
rolloverArea("#area2",id2.src,id2.src,"auto","auto");
rolloverArea("#area3",id2.src,id22.src,"auto","pointer");
rolloverArea("#area4",id2.src,id23.src,"auto","pointer");
rolloverArea("#area5",id2.src,id2.src,"auto","auto");
// onClick effect
$("#area1").click(function() {
$("#innerframe").attr("src","D1.html");
changeImgState("id1");
}
);
$("#area3").click(function() {
$("#innerframe").attr("src","D3.html");
changeImgState("id3");
}
);
$("#area4").click(function() {
$("#innerframe").attr("src","D4.html");
changeImgState("id4");
}
);
break;
case 'id3':
myImgTab.src = id3.src;
// Rollover effect for the image
rolloverArea("#area1",id3.src,id31.src,"auto","pointer");
rolloverArea("#area2",id3.src,id32.src,"auto","pointer");
rolloverArea("#area3",id3.src,id3.src,"auto","auto");
rolloverArea("#area4",id3.src,id33.src,"auto","pointer");
rolloverArea("#area5",id3.src,id3.src,"auto","auto");
// onClick effect
$("#area1").click(function() {
$("#innerframe").attr("src","D1.html");
changeImgState("id3");
}
);
$("#area2").click(function() {
$("#innerframe").attr("src","D2.html");
changeImgState("id2");
}
);
$("#area4").click(function() {
$("#innerframe").attr("src","D4.html");
changeImgState("id4");
}
);
break;
case 'id4':
myImgTab.src = id4.src;
// Rollover effect for the image
rolloverArea("#area1",id4.src,id41.src,"auto","pointer");
rolloverArea("#area2",id4.src,id42.src,"auto","pointer");
rolloverArea("#area3",id4.src,id43.src,"auto","pointer");
rolloverArea("#area4",id4.src,id4.src,"auto","auto");
rolloverArea("#area5",id4.src,id4.src,"auto","auto");
// onClick effect
$("#area1").click(function() {
$("#innerframe").attr("src","D1.html");
changeImgState("id3");
}
);
$("#area2").click(function() {
$("#innerframe").attr("src","D2.html");
changeImgState("id2");
}
);
$("#area4").click(function() {
$("#innerframe").attr("src","D4.html");
changeImgState("id4");
}
);
break;
case 'iw1':
myImgTab.src = iw1.src;
rolloverArea("#area1",iw1.src,iw1.src,"auto","auto");
rolloverArea("#area2",iw1.src,iw11.src,"auto","pointer");
rolloverArea("#area3",iw1.src,iw12.src,"auto","pointer");
rolloverArea("#area4",iw1.src,iw13.src,"auto","pointer");
rolloverArea("#area5",iw1.src,iw14.src,"auto","pointer");
break;
case 'im1':
myImgTab.src = im1.src;
rolloverArea("#area1",im1.src,im1.src,"auto","auto");
rolloverArea("#area2",im1.src,im11.src,"auto","pointer");
rolloverArea("#area3",im1.src,im12.src,"auto","pointer");
rolloverArea("#area4",im1.src,im13.src,"auto","pointer");
rolloverArea("#area5",im1.src,im1.src,"auto","auto");
break;
}
}
function changeTab(tab)
{
switch(tab)
{
case 'day1':
var myTab = document.getElementById("day1");
document.getElementById("week1").className = "active";
document.getElementById("month1").className = "active";
myTab.className = "current";
changeImgState("id1");
$("#innerframe").attr("src","D1.html");
break;
case 'week1':
document.getElementById("day1").className = "active";
document.getElementById("month1").className = "active";
document.getElementById("week1").className = "current";
changeImgState("iw1");
$("#innerframe").attr("src","W1.html");
break;
case 'month1':
document.getElementById("week1").className = "active";
document.getElementById("day1").className = "active";
document.getElementById("month1").className = "current";
changeImgState("im1");
$("#innerframe").attr("src","M1.html");
break;
}
}
function test(tab)
{
alert(document.getElementById.id + " " + document.getElementById(tab).className)
}
</script>
</head>
<body onload="changeTab('day1');">
<table border="0" width="100%">
<tr>
<td colspan="2" align="left">
<div id="navcontainer">
<ul id="navlist">
<li><a class="active" id="day1" onclick="changeTab('day1');">FIRST DAY</a></li>
<li><a class="active" id="week1" onclick="changeTab('week1');">FIRST WEEK</a></li>
<li><a class="active" id="month1" onclick="changeTab('month1');">FIRST 30-DAYS</a></li>
</ul>
</div>
<div id="page_viewer">
<table border="0" width="1020px" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="" style="border: 0px; width: 1000px; height: 72px;" alt="" usemap="#imgTabMap" name="imgTab" id="imgTab">
<map id="imgTabMap" name="imgTabMap">
<area shape="rect" alt="" title="" coords="7,11,166,60" id="area1">
<area shape="rect" alt="" title="" coords="206,10,365,59" id="area2">
<area shape="rect" alt="" title="" coords="405,11,566,59" id="area3">
<area shape="rect" alt="" title="" coords="605,10,763,60" id="area4">
<area shape="rect" alt="" title="" coords="805,9,963,60" id="area5">
<!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) -->
</map>
</td>
</tr>
<tr>
<td width="100%">
<iframe name="fraContent" id="innerframe" frameborder="0" scrolling="no" width="1000px"></iframe>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Дело в том, что теперь моя страница загружается некоторое время, и я не могу понять, почему при нажатии на вкладку кажется, что загрузка фрейма происходит медленно. Приводит ли загрузка SRC iframe к повторной загрузке изображений? Было бы лучше загружать соответствующие изображения по клику, а не загружать их все при открытии страницы?
Я также нашел хорошую альтернативу в виде скрипта параллельной загрузки lieldulev(ImagesQueue) но я не знаю, как его использовать.
Кстати, я не очень разбираюсь в JavaScript, поэтому я стараюсь учиться, как я работаю. Сейчас я занимаюсь реализацией методов, которые я исследую, и пытаюсь понять их функции, поэтому причина в том, что мое кодирование не так чисто, как мне бы хотелось, иногда даже просто с использованием неэффективной "грубой силы" коды для получения желаемого эффекта. Я хотел бы улучшить это, хотя, и любая помощь будет оценена.
Что касается скрипта параллельного кэша, вот тестовая страница, которую я настроил по шаблону после демонстрации Ника:
<html>
<head>
<title>liel's smij dev page</title>
<style type="text/css">
#m1{
width:400px;
height:300px;
background-color:#adf;
}
canvas{
width:100%;
height:100%;
}
#show_me{float:left;width:100px;}
#console_log{font-size:10px;float:right;}
</style>
<script type="text/javascript" src="/systems_hr/Style%20Library/JavaScripts/imagesQueue.js"></script>
</head>
<body>
<h1>imagesQ(ueue.js) Demo</h1>
<!-- <img id="show_me" src="images/id1.png"> -->
<img id="show_me" alt="">
<div id="console_log">Log:</div>
<script type="text/javascript">
/*
imagesQueue Usage Example:
*/
// the img element to show
show_img = document.getElementById('show_me');
log_e = document.getElementById('console_log');
log = function(output){log_e.innerHTML +='<br/>'+(output)};
imagesQueue = imagesQ;
// On every image loaded show progress:
imagesQueue.onLoaded = function()
{
show_img.src = imagesQueue.current.src;
var output = 'Q1 '+(imagesQueue.images.length)+"/"+(imagesQueue.qLength)+" ("+imagesQueue.current.src+") Loaded (onLoaded)";
log(output);
}
// When done say so.
imagesQueue.onComplete = function()
{
QueuesCompleteAll();
}
log('Q1 Queued 10 images (queue_images)');
var now =(new Date).getTime(); // make sure to get non-cached images
imagesQueue.queue_images(['images/id1.png'+now,
'images/id1-1.png'+now,
'images/id1-2.png'+now,
'images/id1-3.png'+now,
'images/id2.png'+now,
'images/id2-1.png'+now,
'images/id2-2.png'+now,
'images/id2-3.png'+now,
'images/id3.png'+now,
'images/id3-1.png'+now]);
log('Starting the queue (process_queue)');
var start = (new Date).getTime();
imagesQueue.process_queue();
log('This is the next line in the code after process_queue, to avoid this, you should design create a function for the rest of your code and call it upon onComplete.');
function QueuesCompleteAll(){
var diff = (new Date).getTime() - start;
log('All Done ('+diff+'ms)');
}
</script>
</body>
</html>
На данный момент я не могу заставить его работать :( Я загрузил скрипт imagesQueue, связал его со страницей и заменил значения изображений с исходной демонстрационной страницы на то, что находится на моем сайте разработки.