Question

我不久前制作了这个网站，目的是抓取随机的puu.sh图像并显示它们。同样是警告，本网站显示的内容是用户生成的，我不能保证它是SFW。

https://dl.dropboxusercontent.com/s/dlb1uke5udz8kwy/index.html

我刚刚开始再次查看它，它似乎对用于收集内容的系统有一些严重的错误。如何更改我的javascript，以便它不会将puu.sh垃圾邮件发送出去，并使其拒绝连接？

以下是代码：

var currentThumb = 0;

function getImgUrl()
{
    var text = (Math.round(Math.random() * 9)).toString();
    //var text = '3T';
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for(var i=0; i < 4; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return 'http://puu.sh/' + text;
}

function open_in_new_tab(url)
{
  var win=window.open(url, '_blank');
  win.focus();
}

function getImages()
{
    //var width = window.innerWidth;
    var images = 10;

    for(var i = 0;i < images;i++)
    {
        var url = getImgUrl();

        document.getElementById('thumbs').innerHTML += '<img class="thumb" id="thumb' + i + '" src=' + url + '>';

        if(i == 0)
        {
            document.getElementById('fullimage').innerHTML = '<img id="big" src=' + url + '>';
            $('#thumb' + currentThumb).css('border','2px solid white');
        }
    }
}

function refreshImages()
{
    var images = 10;

    for(var i = 0;i < images;i++)
    {
        var url = getImgUrl();

        $('#thumb' + i).attr('src',url);
    }

    $('img').css('border','');
    $('#thumb' + currentThumb).css('border','2px solid white');
}

function resize()
{
    var width = $(window).width();
    var height = $(window).height();
    $('#fullimage img').css('max-width',width);
    $('#fullimage img').css('max-height',height - 87);
}

function setBig()
{
    $('#big').attr('src',($('#thumb' + currentThumb).attr('src')));

    $('img').css('border','');
    $('#thumb' + currentThumb).css('border','2px solid white');

    resize();
}

getImages();

$('img').error(function() {
    $(this).attr('src',getImgUrl());
    setBig();
});

$('#thumbs img').click(function() {
    $('#fullimage').html('<img id="big" src=' + $(this).attr('src') + '>');

    currentThumb = parseInt($(this).attr("id").match(/\d+/));

    $('img').css('border','');
    $(this).css('border','2px solid white');

    resize();
});

$('#fullimage').click(function() {
    open_in_new_tab($('#fullimage img').attr('src'));
});

$(window).resize(function() {
    resize();
});

$(document).ready(function() {
    resize();
});

问题最有可能在于

$('img').error(function() {
    $(this).attr('src',getImgUrl());
    setBig();
});

Answer 1

未经测试，但请尝试使用此新getImages()功能（替换旧功能）

function getImages(images)
{
    if (!images) {
        document.getElementById('fullimage').innerHTML = '<img id="big" src=' + url + '>';
        $('#thumb' + currentThumb).css('border','2px solid white');
        images = 1;
    }

    document.getElementById('thumbs').innerHTML += '<img class="thumb" id="thumb' + i + '" src=' + url + '>';

    images++;

    if (images < 10) {
        setTimeout(function() { getImages(images); }, 25);
    }
}

它将被调用9次，但它第一次应该在i = 0和1时做你正在做的事情;无论图像是否已加载，它都会每25ms触发一次。增加该数字（25）以减慢它的速度。

Answer 2

由于错误处理程序，当您点击404时，您的主要问题似乎是垃圾邮件服务器。尝试像

这样的东西

$('img').error(function() {
    var _this = this;
    setTimeout(function () {
        $(_this).attr('src',getImgUrl());
        setBig();
    }, 500); // Whatever timeout is good not to spam
});

如何防止我的javascript过快地轮询网站？

2 个答案: