Javascript iframe 速度问题

Question

所以我正在处理这个页面，它是一个在线目录。您在搜索栏中输入内容并加载结果。在结果中，您可以单击您想查看的图像，然后一个大图像和一些细节出现在 iframe 中。我的问题是，当有很多搜索结果时，iframe 的加载速度非常慢并且也关闭了，但是当只显示几个项目时，它运行得相当快。有谁知道为什么？

<script>
//this affect the content that is loaded in the iframe when image is clicked
$( document ).load( "pageinit", "#page1", function() {    
    $(".popupInfoLink").on("click", function(){
        var url = $(this).data("popupurl");
        $( "#popupInfo iframe" ).attr("src", url);

    });    

//this clears the frame when you navigate away

    $("#popupInfo").on("popupafterclose", function(){
        $( "#popupInfo iframe" ).attr("src", '');
    });

});

下面是影响 iframe 的脚本和运行该脚本的缩略图。

<div>
<a class="popupInfoLink" href="#popupInfo" data-rel="popup" data-position-to="window" data-popupurl="product.asp?itemid=[catalogid]"><img src= "/[THUMBNAIL]" style="max-height:300px; min-height:150px;" alt="pot" border="0" />
</a>
</div>


<div data-role="popup" id="popupInfo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content">
    <iframe src="about:blank" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');" allowtransparency="true"></iframe>
</div>   

我的问题是，如果在两种情况下都只加载一个 iframe，为什么在搜索结果中显示更多项目时 iframe 加载速度会显着减慢，而不是仅加载几个项目？

Answer 1

想想缩略图。如果您可以显着减小正在加载的图片的大小，则可以显着减少加载时间。缩略图可以在服务器端动态生成。