douxi4114 2015-11-14 03:00 采纳率: 100%
浏览 629
已采纳

通过jQuery Ajax加载图像

I am creating an application which browses a large amount of pictures. At this point, that portion of the project is done and it sorts, filters, and loads the correct pictures, and even splits them into separate pages for faster loading.

This works great, but it still takes over 8 seconds to load the 25 pictures per page. I have done some research and I have concluded that using asynchronous jQuery Ajax requests would be the best to load them all at the same time as fast as possible.

Here is my code for this so far:

var imageArray = <?php if (!empty($images)) {echo '["' . implode('", "', $images) . '"]';} else {echo "false";} ?>;
console.log(imageArray);
console.log(imageArray.length);
for (i = 0; i < imageArray.length; i++) {
    $.ajax({
        type: 'GET',
        url: imageArray[i],
        dataType: 'image/jpg',
        async: true,
        success: function (data) {
            $("#" + i).attr("src", data);
        }
    });
}

The problem with this code is that it doesn't load nothing but an empty white square with a grey border. When I modify the code and run it in console in Chrome, data ends up being a string of jumbled up characters which I presume are the raw image data.

I have been searching for several days now, including on SO, and I have yet to find a solution which does what I need. On the contrary, I have found solutions which simply put the url into the image source using jQuery attr() which isn't what I need.

If anyone can provide any kind of solution to fix this code, or even perhaps a different and more efficient method of getting all the images, I am open to anything.

imageArray: http://pastebin.com/03tvpNey

Regards, Emanuel

  • 写回答

3条回答 默认 最新

  • duanlu1959 2015-11-14 03:34
    关注

    If you're using Base64 image data (the string of jumbled characters you mentioned), you'll need to get your img src to be something like:

    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
    

    So your code should be:

    var imageArray = <?php if (!empty($images)) {echo '["' . implode('", "', $images) . '"]';} else {echo "false";} ?>;
    console.log(imageArray);
    console.log(imageArray.length);
    for (i = 0; i < imageArray.length; i++) {
    $.ajax({
        type: 'GET',
        url: imageArray[i],
        dataType: 'image/jpg',
        async: true,
        success: function (data) {
            $("#" + i).attr("src", 'data:image/png;base64,'+data);
        }
    });
    }
    

    However... I'd be very surprised if loading the images over AJAX and using the Base64 content is any quicker than using a normal <img src="path"/> approach.

    The point of AJAX is to fetch some data after the DOM is loaded. All moderns browsers will already fetch images asynchronously. I doubt you'll see any performance gain whatsoever.

    I'd suggest the more likely problem is that your 25 images... which I suppose are displayed as thumbnails... are still large, hi-res images. You should save a smaller 'thumbnail' version, and then fetch the hi-res image when/if the user clicks on the thumbnail to view the full-size one.

    Note that an element ID can start with (or be) a number. This wasn't valid in HTML4, but is perfectly fine in HTML5. However, you might have trouble with CSS rules - so you'd be better off prefixing with a letter (i.e. i1,i2,i3...).

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • douting1871 2015-11-14 03:22
    关注

    I had an issue with this a while ago, I used this code:

    function loadImage(path, width, height, target) {
        var loaded = true;
        $('<img src="' + path + '">').load(function () {
            if (loaded) {
                $(this).css('maxWidth', width).css('maxHeight', height).appendTo(target);
                loaded = false;
            }
        });
    }
    

    UPDATE:

    using your images array:

    ["20151107_140328.jpg", "20151107_140329.jpg", "20151107_141113.jpg", "20151107_141114.jpg", "20151107_141439.jpg", "20151107_141447.jpg", "20151107_141500.jpg", "20151107_205509.jpg", "20151107_205512.jpg", "20151107_213703.jpg", "20151107_213708.jpg", "20151107_213823.jpg", "20151108_143256.jpg", "20151108_143258.jpg", "20151108_143320.jpg", "20151108_143322.jpg", "20151108_143339.jpg", "20151108_143340.jpg", "20151108_143419.jpg", "20151108_143422.jpg", "20151108_143433.jpg", "20151108_143435.jpg", "20151108_143443.jpg", "20151108_143445.jpg"]
    

    You can do this:

    var image_array = ["20151107_140328.jpg", "20151107_140329.jpg", "20151107_141113.jpg", "20151107_141114.jpg", "20151107_141439.jpg", "20151107_141447.jpg", "20151107_141500.jpg", "20151107_205509.jpg", "20151107_205512.jpg", "20151107_213703.jpg", "20151107_213708.jpg", "20151107_213823.jpg", "20151108_143256.jpg", "20151108_143258.jpg", "20151108_143320.jpg", "20151108_143322.jpg", "20151108_143339.jpg", "20151108_143340.jpg", "20151108_143419.jpg", "20151108_143422.jpg", "20151108_143433.jpg", "20151108_143435.jpg", "20151108_143443.jpg", "20151108_143445.jpg"];
    
    for(var i = 0; i < image_array.length; i++) {
        loadImage(image_array[i], <width>, <height>, <container targeted>);
    }
    

    and in the imageLoad function:

    function loadImage(path, width, height, target) {
        var loaded = true;
        $('<img src="/path/to/image/' + path + '">').load(function () {
            if (loaded) {
                $(this).css('maxWidth', width).css('maxHeight', height).appendTo(target);
                loaded = false;
            }
        });
    }
    
    评论
  • duanjianhe1388 2015-11-14 03:30
    关注

    Change your ids to id1,id2 or something similar from 1,2 and in success use this:

                $("#id" + i).attr("src", data);
    

    see why id should not start from a number:What are valid values for the id attribute in HTML?

    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 怎么下载MySQL,怎么卸干净原来的MySQL
  • ¥15 网络打印机Ip地址自动获取出现问题
  • ¥15 求局部放电案例库,用于预测局部放电类型
  • ¥100 QT Open62541
  • ¥15 stata合并季度数据和日度数据
  • ¥15 谁能提供rabbitmq,erlang,socat压缩包,记住版本要对应
  • ¥15 Vue3 中使用 `vue-router` 只能跳转到主页面?
  • ¥15 用QT,进行QGIS二次开发,如何在添加栅格图层时,将黑白的矢量图渲染成彩色
  • ¥50 监控摄像头 乐橙和家亲版 保存sd卡的文件怎么打开?视频怎么播放?
  • ¥15 Python的Py-QT扩展库开发GUI