首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >将图像缓存在网站上,增加浏览体验,加载速度更快

将图像缓存在网站上,增加浏览体验,加载速度更快
EN

Stack Overflow用户
提问于 2014-01-06 14:15:14
回答 2查看 158关注 0票数 0

链接http://i.stack.imgur.com/9F0q5.jpg

我试图使我的网页加载更快和更好的用户体验,我试图调整这些图片在我的网站。我的网站上有很多图片

至于上面的图像,您可以看到图像的原始大小(自然大小)是960x960,在网站上显示的图像是214 x 214。

如果其中一幅图像是巨大的,比如1920年x 1080,高清大小。它将需要更长的时间来加载整个页面,等待高清图像充分加载。

有人能告诉我解决办法吗。我看到很多网站都使用了图像缓存,当点击图片时,它会加载原始图像。

EN

回答 2

Stack Overflow用户

发布于 2014-01-06 14:23:14

您需要使用缩略图

要执行此操作,您需要放置缩小大小的图片的位置。在网站上,你只显示小的图片,点击它们显示真实大小的图片(我建议用某种Javascript来实现这一点)。

票数 0
EN

Stack Overflow用户

发布于 2014-01-06 21:05:29

用于存储较小的图像(缩略图):

代码语言:javascript
运行
复制
function make_thumb($src, $dest, $desired_width) {

    /* read the source image */
    $source_image = imagecreatefromjpeg($src);
    $width = imagesx($source_image);
    $height = imagesy($source_image);

    /* find the "desired height" of this thumbnail, relative to the desired width  */
    $desired_height = floor($height * ($desired_width / $width));

    /* create a new, "virtual" image */
    $virtual_image = imagecreatetruecolor($desired_width, $desired_height);

    /* copy source image at a resized size */
    imagecopyresampled($virtual_image, $source_image, 0, 0, 0, 0, $desired_width, $desired_height, $width, $height);

    /* create the physical thumbnail image to its destination */
    imagejpeg($virtual_image, $dest);
}

它使用了php的GD函数

用于在客户端浏览器上调整图像大小:

代码语言:javascript
运行
复制
//on js
var thumbSize = 64;
var canvas = document.getElementById("canvas");
canvas.width = thumbSize;
canvas.height = thumbSize;
var c = canvas.getContext("2d");
var img = new Image();
img.onload = function(e) {
    c.drawImage(this, 0, 0, thumbSize, thumbSize);//64x64
    document.getElementById("yourImgID").src = canvas.toDataURL("image/png");
};
img.src = fileDataURL;

提供:参考

选一个最适合你的

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20951834

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档