Question

mySql数据库包含我的页面所需的图像。在脚本加载时不知道它们。当我发现图像名称时，我成功地预加载了所需的小缩略图，但后来需要的更大图像就像蜗牛一样。我需要弄清楚如何在页面渲染小图像时启动大图像的下载。这应该通过异步操作，因为我不想阻止我的页面。有人可以建议如何在需要之前加载大图像吗？

Answer 1

这是一种方式。

1。使用缩略图自然加载页面。

2. 当你的网页被加载时，使用javascript将图像添加到页面中，但是以不可见的方式。

示例代码

<html>
    <!-- head, start of body, your normal code, etc -->

    <?php
        /* when you gather your images, place the URLs
        of the big images in an array called $bigImages
        for example. Then, add quotes around them (we
        are going to create a single String) */

        for($i=0; $i<count($bigImages); $i++)
            $bigImages[$i] = '"'.$bigImages[$i].'"';

        // $myList will become a String: "url1","url2", etc
        $myList = implode(',',$bigImages);
    ?>

    <script>
        // put all url's in a js variable
        var bigImages = [<?php echo $myList; ?>];

        // when the normal page is loaded
        window.onload = function(){
            // create some code to append to the body
            var preloader = '<div id="preloader">';
            for(var i=0; i<bigImages.length; i++)
                preloader += '<img src="'+bigImages[i]+'" alt="">';
            preloader += '</div>';

            // insert your images in the page
            document.body.innerHTML += preloader;
        };
    </script>
    </body>
</html>

此代码在加载后在页面中插入<img>标记。但现在你需要隐藏它们，用css：

#preloader{
    position:absolute;
    top:-9999px;
    left:-9999px;
}

不要使用display:none;，因为这会阻止他们加载。

修改

Ann，你似乎遇到了一些问题，所以我尝试了这个代码并想出了一个示例页面，你可以复制并粘贴到一个新的php文件中来测试它，看看它是否有效。这应该打开一个包含3个大图像的页面，加载javascript：

<!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
</head>
<body>
    <p>This is the normal page, without the big images</p>
    <?php
        $bigImages=["http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg","http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg","http://static3.businessinsider.com/image/52cddfb169beddee2a6c2246/the-29-coolest-us-air-force-images-of-the-year.jpg"];
        for($i=0; $i<count($bigImages); $i++)
            $bigImages[$i] = '"'.$bigImages[$i].'"';
        $myList = implode(',',$bigImages);
    ?>
    <script>
        var bigImages = [<?php echo $myList; ?>];
        window.onload = function(){
            alert('Now that the normal page is fully loaded, we are going to add the images with javascript.');
            var preloader = '<div id="preloader">';
            for(var i=0; i<bigImages.length; i++)
                preloader += '<img src="'+bigImages[i]+'" alt="">';
            preloader += '</div>';
            document.body.innerHTML += preloader;
        };
    </script>
</body>
</html>

至于图片的大小，我同意您对问题的评论，1MB对于网络上的图片来说已经很多了，所以这一切都归结为您网站的目的。如果人们要下载这些图像并且需要非常高质量的话，可能需要保持这种状态（即使他们下载后只需要高质量），但是目的只是在页面上显示它们考虑将它们的尺寸降低到最大300kB，这对于今天的平均监视器应该足够了。

Adobe Photoshop可以选择在文件 / 保存为Web和设备下控制其大小，您可以在其中调整图像的压缩（它们肯定会赢得＆＃39）如果你将它们从100％降低到70％，那就失去了那么多的质量）

在后台加载动态发现的图像

1 个答案:

示例代码

修改