Question

我在上一个问题上得到了以下代码（http://stackoverflow.com/questions/10920514/using-ajax-jquery-to-refresh-an-image）

这样做的方式是image_feed.php向图像返回了一个url。下面的代码段下载了此图片，然后将其与页面上的现有图片交换出来。

我现在已经改变了我的应用程序的工作方式，并且图像的URL不会像以前那样改变，所以我可以绕过image_feed.php脚本。

所以我有一个图像，image.php？id = 11，我需要下载这个图像，等待它完成加载，然后用#camera_image_changer图像交换它。

我正在努力做两件事。一个是记住脚本如何实际再次工作，因为我可以直接给它图像URL，其次阻止它缓存图像。

非常感谢任何帮助。

由于

// image feed
var $img = $('#camera_image_changer'); 

 setInterval(function() {

    $.get('../helpers/image_feed.php?camera_id=11', function(data) {
    var $loader = $(document.createElement('img'));

     $loader.load(function() {
        $img.attr('src', $loader.attr('src'));
     });

     $loader.attr('src', data);

    });

}, 5000);

更新：我可能已经回答了我自己的问题。我有以下代码，它正在工作，这是一个好的方法吗？

// image feed
var $img = $('#camera_image_changer'); 

setInterval(function() {

        var $loader = $(document.createElement('img'));

        $loader.load(function() {
            $img.attr('src', $loader.attr('src'));
        });

        $loader.attr('src', '../helpers/image.php?<?=$resource;?>=<?=$resource_id;?>');

}, 5000);

Answer 1

您可以移除get来电并仅使用其中的代码，为data变量指定图片的路径：

var $img = $('#camera_image_changer');   

// this delay the code execution in milliseconds
setInterval(function() { 
    var data = "path/to/image.jpg";

    // Creates an image object and pass it to jQuery return a jQuery object
    var $loader = $(document.createElement('img')); 

    // Create a callback that fires when the image finishes loading
     $loader.load(function() { 
        // assign the source of the loaded image to the target image
        $img.attr('src', $loader.attr('src')); 
     }); 

     // assign the image to load
     $loader.attr('src', data);
 }, 5000); // 5 seconds (5000 ms)

在之前的代码中，get方法调用页面并将内容作为data变量返回。

使用jQuery预加载和更改图像 - 无法使用我自己的脚本

1 个答案: