0

我在ASP网站上运行了一个jQuery脚本，该脚本在选择表单的ID匹配DIV的ID时显示隐藏的DIVS：

$(document).ready(function(){
    $('select[name$="_77"]').change(function() {
        $(".select_77").hide();
        $(".select_77[id='" + this.value + "']").show();
    })
})

对于此示例，表单被截断为只有一个选项：

<select name="option____jdfhj387___77">
    <option value="1922">Raisins</option>
</select>

这是许多未隐藏的 div 之一：

<div id="select_image">
    <div class="select_77" id="1922" style="display:none;">
        <div class="border">
            <div class="content">
                <img src="photos/option/1922.jpg">
            </div>
        </div>
    </div>
</div>

这些照片是中等大小的，当我有 200 多张这些图像时，页面加载大约需要 20-30 秒。是否只有在父 div 可见时才加载图像，而不必手动将每个图像 url 放入脚本中？

4

1 回答 1

0

好的，经过几个小时的研究，我想通了。

我找到并添加了代码，该代码重命名了在表单下选择了匹配 ID 的 img 标记的属性。

$(document).ready(function(){
    $('select[name$="_77"]').change(function() {
        $(".select_77").hide();
        $(".select_77[id='" + this.value + "']").show();
        $("img.option[realsrc][id='" + this.value + "']").each(function() {
            var $t = $(this);
                $t
                .attr({
                    src : $t.attr('realsrc') /* Copies realsrc attribute and makes a src attribute*/
                })
                .removeAttr('realsrc'); /* Deletes the realsrc attribute */
    });
    })
})

然后我添加了 class="option" 和 id="#" 并将 src= 重命名为 realsrc=。

<img class="option" id="1922" realsrc="photos/option/1922.jpg">

现在当有人选择与图片ID匹配的选项时，图片的realsrc会被重命名为src，它就会下载并出现！

于 2012-07-19T03:48:47.850 回答