Jquery 仅当弹出窗口出现时加载img_Jquery_Css_Ajax

Jquery 仅当弹出窗口出现时加载img

jquery css ajax

Jquery 仅当弹出窗口出现时加载img,jquery,css,ajax,Jquery,Css,Ajax,首先，我是jQuery或AJAX的初学者我在一个网页上有大约50多个链接，每个链接都有一个div#弹出窗口，其中包含一个表和一个img。这意味着当页面加载时，大约有50张图片正在加载，这会使网站速度减慢很多因此，我想知道是否有一种方法可以只在鼠标经过链接时加载图片\ 这是我正在使用的代码和脚本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> &

首先，我是jQuery或AJAX的初学者

我在一个网页上有大约50多个链接，每个链接都有一个div#弹出窗口，其中包含一个表和一个img。这意味着当页面加载时，大约有50张图片正在加载，这会使网站速度减慢很多

因此，我想知道是否有一种方法可以只在鼠标经过链接时加载图片\

这是我正在使用的代码和脚本

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>jQuery Popup Div on hover Test</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var moveLeft = 20;
    var moveDown = 10;

    $('a#trigger').hover(function(e) {
        $('div#pop-up').show();
    }, function() {
        $('div#pop-up').hide();
    });

    $('a#trigger').mousemove(function(e) {
        $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
    });
});
</script>
<style type="text/css">
.wpm_pag.mng_lts_chp.grp .det a.ttl{
    color: #0000ff;
    font-size:16px;
    line-height:12px;
    height:14px;
    display:block;
    padding:0 0 2px 0
}    

.wpm_pag.mng_lts_chp.grp .det div#pop-up table tr td img{
    border: 1px solid #e74f25;
}

.wpm_pag.mng_lts_chp.grp .det div#pop-up table{
    margin:0;
    background-color:#656565;
}

.wpm_pag.mng_lts_chp.grp .det div#pop-up table tr.firstR{
    background-color:black;
    height: 30px;
    font-size: 120%;
}

.wpm_pag.mng_lts_chp.grp .det div#pop-up table tr td.otherRow{
    height: 20px;
}

.wpm_pag.mng_lts_chp.grp .det div#pop-up table tr td.otherRow b{
    color: #3C3C3C;
}

/* Popup CSS */
.wpm_pag.mng_lts_chp.grp .det div#pop-up {
    display: none;
    position: absolute;
    padding: 0px 5px 5px 5px;
    background-color: #000;
    color: #FFF;
    border: 1px solid #1a1a1a;
    font-size: 110%;
    font-family:"Comic Sans MS", cursive, sans-serif;
}

</style>


</head>
<body>
<div class="wpm_pag mng_lts_chp grp">
    <div class="det">
        <p><a href="#" class="ttl" id="trigger">this link</a></p>
    <!-- HIDDEN / POP-UP DIV -->
    <div id="pop-up">
      <table width="650px" cellspacing="0" cellpadding="2px">
            <tr class="firstR">
                <td colspan="3">Nenee! Ane Tokitoki Kanojo</td>
                <td style="text-align: right;" width="25%">Rating</td>
            </tr>
            <tr>
                <td width="200px" rowspan="4"><img height="200" width="200" src ="http://gooddealstore.us/icon/test.jpg" alt="xxx" /></td> /** php echo url
                <td class="otherRow" colspan="3"></td>
            </tr>
            <tr>
                <td class="otherRow"><b>Release:</b></td> /** php 
                <td class="otherRow"><b>Author:</b></td>    echo
                <td class="otherRow"><b>Artist:</b></td>   **/
            </tr>
            <tr>
                <td class="otherRow" colspan="3"><b>Genres:</b></td>
            </tr>
            <tr>
                <td style="vertical-align: top;" colspan="3"></td>
            </tr>
        </table>
    </div>

  </div>
</body>
</html>


jQuery弹出Div on hover Test
$（函数（）{
var moveLeft=20；
var-moveDown=10；
$（'a#触发器'）。悬停（函数（e）{
$（'div#pop-up'）.show（）；
}，函数（）{
$（'div#pop-up'）.hide（）；
});
$（'a#trigger'）.mousemove（函数（e）{
$（“div弹出”）.css（'top'，e.pageY+moveDown）.css（'left'，e.pageX+moveLeft）；
});
});
.wpm_pag.mng_lts_chp.grp.det a.ttl{
颜色：#0000ff；
字体大小：16px；
线高：12px；
高度：14px；
显示：块；
填充：0 2px 0
}    
.wpm_pag.mng lts_uchp.grp.det div#弹出表tr td img{
边框：1px实心#e74f25；
}
.wpm_pag.mng_lts_chp.grp.det div#弹出表{
保证金：0；
背景色：#6565；
}
.wpm_pag.mng_lts_chp.grp.det div#弹出表tr.firstR{
背景色：黑色；
高度：30px；
字体大小：120%；
}
.wpm_pag.mng_lts_chp.grp.det div#弹出表tr td.otherRow{
高度：20px；
}
.wpm_pag.mng_lts_chp.grp.det div#弹出表tr td.otherb行{
颜色：#3C；
}
/*弹出式CSS*/
.wpm_pag.mng_lts_chp.grp.det div#弹出窗口{
显示：无；
位置：绝对位置；
填充：0px 5px 5px 5px；
背景色：#000；
颜色：#FFF；
边框：1px实心#1A1A；
字体大小：110%；
字体系列：“漫画无MS”，草书，无衬线；
}

尼尼！菅野东彦
评级
/**php回送url
发布：/**php
作者：echo
艺术家：**/
体裁：

我会给每个锚定标记一个url，然后像这样做标记

Html:

var l=$（“.imageLink”）。单击（函数（e）{
e、 预防默认值（）；
}).悬停（功能（e）{
var imageUrl=$（this.attr（'href'），
container=$（'#imageContainer'）.show（），
image=$（“#imageContainer>img[src='“+imageUrl+”]）；
如果（image.length>0）{
image.show（）；
}否则{
容器。附加（“”）；
}
}，函数（）{
$（'#imageContainer，#imageContainer>img'）.hide（）；
});

我要做的是使用锚中的

href

向dom添加一个图像。如果元素已经存在（我使用它们的

src

检查div中的图像），我只显示图像。如果我们把这个想法应用到你的例子中，我会给

td

元素一个

id

的

imageContainer

，这样图像元素就添加到那里了。

你可能想看看这个jQuery插件：和YUI 2 Imageloader

？“class=”imageLink“>但img不会显示！在我的示例中，锚点等于#触发器。我假设您会有很多这样的锚点？是的，我需要的是一个脚本，以便在鼠标悬停在链接上时在表内加载标记。例如：我有一个when mouseover”文本“弹出窗口将出现，弹出窗口内的标签将加载。好吧，我的示例正是在做你想要做的事情，只是它使用了一个div。接受这个想法，并在表和td元素的上下文中使用它。

<ul>
    <li><a href="http://placehold.it/100x100" class="imageLink">Image 1</a></li>
    <li><a href="http://placehold.it/100x110" class="imageLink">Image 2</a></li>
    <li><a href="http://placehold.it/100x90" class="imageLink">Image 3</a></li>
</ul>
<div id="imageContainer">
</div>

var l = $(".imageLink").click(function(e) {
    e.preventDefault();
}).hover(function(e) {
    var imageUrl = $(this).attr('href'),
        container = $('#imageContainer').show(),
        image = $("#imageContainer > img[src='" + imageUrl + "']");
    if(image.length > 0) {
        image.show();
    } else {
        container.append("<img src='" + imageUrl + "' />");
    }
}, function() {
    $('#imageContainer, #imageContainer > img').hide();
});