I have this idea for my website that every time you visit the page, the background will be different. I want to get literally any picture from Google images and place it as my website's background using Javascript.
我对我的网站有这样的想法,每次访问该页面时,背景都会有所不同。我希望从Google图像中获取任何图片,并使用Javascript将其作为我网站的背景。
Basically every time you refresh the page a script will fetch a random picture from Google images and place it as the background or maybe at least download the picture.
基本上每次刷新页面时,脚本都会从Google图像中获取随机图片并将其作为背景或者至少下载图片。
How should I do this, or is it even possible?
我该怎么做,或者甚至可能吗?
1 个解决方案
#1
20
It can be done via Google Images though much customization is required so the script behaves as you intended (including setting up a delay to handle rate-limiting; Google has a rate-limit of 64 items per search request over API) here is a basic example using Google Images api:
它可以通过谷歌图像完成,虽然需要进行大量自定义,因此脚本的行为符合您的预期(包括设置延迟来处理速率限制;谷歌的每个搜索请求的速率限制为64项)这里是一个基本的使用Google Images api的示例:
<html>
<head>
<title></title>
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(OnLoad);
var search;
//i suggest instead of this to make keywords list so first to pick random keyword than to do search and pick random image
var keyword = 'mountains';
function OnLoad()
{
search = new google.search.ImageSearch();
search.setSearchCompleteCallback(this, searchComplete, null);
search.execute(keyword);
}
function searchComplete()
{
if (search.results && search.results.length > 0)
{
var rnd = Math.floor(Math.random() * search.results.length);
//you will probably use jQuery and something like: $('body').css('background-image', "url('" + search.results[rnd]['url'] + "')");
document.body.style.backgroundImage = "url('" + search.results[rnd]['url'] + "')";
}
}
</script>
</head>
<body>
</body>
</html>
However may I suggest instead: Random images from flickr, here is another basic code for that (sky is the limit):
但是我可以建议:来自flickr的随机图像,这是另一个基本代码(天空是极限):
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var keyword = "mountains";
$(document).ready(function(){
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
tags: keyword,
tagmode: "any",
format: "json"
},
function(data) {
var rnd = Math.floor(Math.random() * data.items.length);
var image_src = data.items[rnd]['media']['m'].replace("_m", "_b");
$('body').css('background-image', "url('" + image_src + "')");
});
});
</script>
</head>
<body>
</body>
</html>
#1
20
It can be done via Google Images though much customization is required so the script behaves as you intended (including setting up a delay to handle rate-limiting; Google has a rate-limit of 64 items per search request over API) here is a basic example using Google Images api:
它可以通过谷歌图像完成,虽然需要进行大量自定义,因此脚本的行为符合您的预期(包括设置延迟来处理速率限制;谷歌的每个搜索请求的速率限制为64项)这里是一个基本的使用Google Images api的示例:
<html>
<head>
<title></title>
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(OnLoad);
var search;
//i suggest instead of this to make keywords list so first to pick random keyword than to do search and pick random image
var keyword = 'mountains';
function OnLoad()
{
search = new google.search.ImageSearch();
search.setSearchCompleteCallback(this, searchComplete, null);
search.execute(keyword);
}
function searchComplete()
{
if (search.results && search.results.length > 0)
{
var rnd = Math.floor(Math.random() * search.results.length);
//you will probably use jQuery and something like: $('body').css('background-image', "url('" + search.results[rnd]['url'] + "')");
document.body.style.backgroundImage = "url('" + search.results[rnd]['url'] + "')";
}
}
</script>
</head>
<body>
</body>
</html>
However may I suggest instead: Random images from flickr, here is another basic code for that (sky is the limit):
但是我可以建议:来自flickr的随机图像,这是另一个基本代码(天空是极限):
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var keyword = "mountains";
$(document).ready(function(){
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
tags: keyword,
tagmode: "any",
format: "json"
},
function(data) {
var rnd = Math.floor(Math.random() * data.items.length);
var image_src = data.items[rnd]['media']['m'].replace("_m", "_b");
$('body').css('background-image', "url('" + image_src + "')");
});
});
</script>
</head>
<body>
</body>
</html>