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

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

Javascript iframe速度问题

1 个答案: